provide/inject permiten que un componente antecesor proporcione datos a cualquier descendiente, sin importar cuán profundo, sin pasar props a través de cada componente intermedio. Resuelven el problema del prop drilling.
App → Layout → Sidebar → Menu → MenuItem
Si solo MenuItem necesita theme, pasarlo como prop a través de Layout, Sidebar y Menu (que no lo usan) es tedioso y ruidoso. provide/inject omiten lo intermedio.
<!-- App.vue -->
<script setup>
import { provide, ref } from "vue";
const theme = ref("dark");
provide("theme", theme); // make `theme` available to ALL descendants
provide("toggleTheme", () => { // can provide functions too
theme.value = theme.value === "dark" ? "light" : "dark";
});
</script>
<!-- MenuItem.vue (deeply nested) -->
<script setup>
import { inject } from "vue";
const theme = inject("theme"); // get it directly — no props in between
const toggleTheme = inject("toggleTheme");
const color = inject("color", "blue"); // with a default fallback
</script>
// ✅ provide a ref/reactive so descendants see updates
provide("theme", theme); // theme is a ref → reactive
// ❌ provide("theme", theme.value) → passes a snapshot, not reactive
Proporciona el objeto reactivo (el ref, no su .value) para que cuando cambie, todos los componentes inyectados se actualicen.
import { themeKey } from "./keys"; // export const themeKey = Symbol()
provide(themeKey, theme); // avoids string-key collisions
provide/inject → pass data down a specific subtree (theme, form context, a service)
Pinia → global, app-wide shared state (user, cart) usable anywhere
Usa provide/inject para inyección de dependencias dentro de un subárbol; recurre a Pinia cuando el estado es verdaderamente global o compartido entre partes no relacionadas de la aplicación.
provide/inject eliminan el prop drilling para datos que muchos componentes anidados comparten (temas, idioma, formularios/contexto, servicios de plugins).
Saber cómo proporcionar valores reactivos (para que las actualizaciones se propaguen), usar claves predeterminadas/Symbol, y distinguirlo del estado global (Pinia) te permite pasar contexto compartido limpiamente a través de árboles de componentes profundos.