0Pricing
Frontend Academy · Lección

provide() e inject() para la inyección de dependencias

Proporcione valores en un componente antecesor e inyéctelos en niveles profundos del árbol, evitando el prop drilling sin una biblioteca completa de gestión de estado.

provide() e inject() para la inyección de dependencias es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

El problema del prop drilling

A veces los datos viven en un componente de nivel superior y deben llegar a un descendiente profundo. Pasarlos por cada componente intermedio (prop drilling) resulta tedioso y frágil.

provide() — Declarar un valor

Un ancestro llama a provide(key, value) en setup(). El valor queda disponible para todos sus descendientes.

<!-- ParentComponent.vue -->
<script setup>
import { provide, ref } from 'vue';

const theme = ref('dark');
provide('theme', theme);
</script>

inject() — Consumir un valor

Cualquier descendiente llama a inject(key) para leerlo.

<!-- DeepChild.vue -->
<script setup>
import { inject } from 'vue';

const theme = inject('theme');
</script>

<template>
  <div :class="theme">Theme is: {{ theme }}</div>
</template>

Reactividad con ref/reactive

Si proporciona un objeto ref o reactive, los descendientes obtienen un valor reactivo y las actualizaciones se propagan automáticamente.

// Parent
const user = reactive({ name: 'Alice', role: 'admin' });
provide('user', user);

// Anywhere descendant
const user = inject('user');
user.role; // 'admin' — reactive

Claves Symbol para evitar colisiones

Las claves de tipo string pueden colisionar en aplicaciones grandes. Los Symbols garantizan la unicidad; defínalos en un archivo compartido.

// keys.ts
export const ThemeKey = Symbol('theme');
export const UserKey  = Symbol('user');

// Parent
provide(ThemeKey, ref('dark'));
// Child
const theme = inject(ThemeKey);

Compatibilidad con TypeScript

Use InjectionKey<T> para garantizar la seguridad de tipos en ambos lados.

import type { InjectionKey, Ref } from 'vue';

export const ThemeKey: InjectionKey<Ref<string>> = Symbol('theme');

// Provider:
provide(ThemeKey, ref('dark'));

// Consumer (type-checked):
const theme = inject(ThemeKey); // Ref<string> | undefined

Valores predeterminados

Si ningún ancestro proporciona la clave, inject devuelve undefined a menos que pase un valor predeterminado.

const theme = inject('theme', 'light'); // default if missing
const lazy  = inject('user', () => createDefaultUser(), true); // factory

Valores proporcionados de solo lectura

Para evitar que los descendientes modifiquen el estado compartido, envuélvalo con readonly().

import { readonly } from 'vue';

const user = reactive({ name: 'Alice' });
provide('user', readonly(user));
// Children can read but cannot mutate

provide a nivel de aplicación

Proporcione valores a nivel de aplicación para que estén disponibles en todas partes; resulta útil para los plugins.

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.provide('apiClient', new ApiClient());
app.mount('#app');

Envoltorio composable

Envuelva provide/inject en un composable para ofrecer una API de consumo más sencilla.

// useTheme.ts
import { inject, type InjectionKey, type Ref } from 'vue';

export const ThemeKey: InjectionKey<Ref<string>> = Symbol('theme');

export function useTheme() {
  const theme = inject(ThemeKey);
  if (!theme) throw new Error('useTheme: no provider in tree');
  return theme;
}

provide/inject frente a Pinia

provide/inject: ligero, sin biblioteca e ideal para valores de estilo plugin (tema, configuración regional, usuario actual). Pinia: gestión de estado completa con DevTools, óptima para el estado reactivo de toda la aplicación con actualizaciones complejas.

Comprobación rápida

¿Cuál es la forma recomendada de evitar colisiones de claves al usar provide/inject en una aplicación Vue grande?

Resumen: provide/inject

El ancestro proporciona y el descendiente inyecta; no hay prop drilling. Los valores reactivos (ref/reactive) se propagan de forma reactiva. Las claves Symbol y InjectionKey permiten una inyección segura en cuanto a tipos y sin colisiones. Use un valor predeterminado como segundo argumento de inject. Use readonly() para evitar modificaciones. Use provide a nivel de aplicación para plugins compartidos entre aplicaciones. Es una alternativa ligera a Pinia para valores de estilo plugin.

Preguntas frecuentes

¿La lección «provide() e inject() para la inyección de dependencias» es gratis?

Sí — el texto completo de «provide() e inject() para la inyección de dependencias» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «provide() e inject() para la inyección de dependencias»?

Proporcione valores en un componente antecesor e inyéctelos en niveles profundos del árbol, evitando el prop drilling sin una biblioteca completa de gestión de estado. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «provide() e inject() para la inyección de dependencias»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. provide() e inject() para la inyección de dependencias
  2. Componentes asíncronos y Suspense
  3. Directivas personalizadas
  4. Sistema de plugins: app.use()
← Volver a Frontend Academy