Vue 18: Provide / Inject
easy⏱ 5 mincoursevue
provide() arriba, inject() abajo
provide e inject se emparejan por clave — un string o, en apps reales, un Symbol (más seguro, evita colisiones de nombres entre librerías/features no relacionadas). Si provees un objeto reactive (construido con reactive(), o que contiene refs), cualquier mutación desde el lado que inyecta fluye naturalmente hacia arriba — se comparte el mismo objeto subyacente, no se copia.
import { provide, inject, reactive } from 'vue';
// Ancestor:
const user = reactive({ name: 'Ada' });
provide('user', user);
// ANY descendant, any depth:
const injectedUser = inject('user');
console.log(injectedUser.name); // 'Ada', fully reactive
Claves, valores por defecto y reactividad
inject('key', valorPorDefecto) acepta un segundo argumento usado cuando no se proveyó nada — útil para componentes que también deben funcionar de forma independiente. Recuerda: inyectar un valor plano no reactivo te da una instantánea congelada; para mantener la conexión viva (como en esta lección, donde el hijo puede alternar el tema), el valor provisto en sí debe ser reactive.
Alterna el tema desde 3 niveles de profundidad
Haz clic en el botón Toggle dentro de DeepChild y observa cómo cambian los colores de la tarjeta — esa mutación ocurrió sobre el MISMO objeto reactive que el App raíz proveyó, sin que MiddleLayer siquiera supiera que theme existe.