provide/inject lehetővé teszi egy szülő komponensnek, hogy bármely leszármazottnak adatot nyújtson, függetlenül attól, hogy milyen mélyen van, anélkül, hogy a props-ot minden közbenső komponensen át kellene adni. Megoldják a prop drilling problémát.
App → Layout → Sidebar → Menu → MenuItem
Ha csak a MenuItem-nek kell a theme, akkor azt Layout, Sidebar és Menu (amelyik nem használja) között props-ként átadni fárasztó és zavaros. A provide/inject megkerüli a közepet.
<!-- 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
Nyújtsd a reaktív objektet (the ref, not its .value) úgy, hogy amikor megváltozik, az összes injektáló komponens frissüljön.
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
Használd a provide/inject-et függőség-beinjektáláshoz egy részfán belül; fordulj a Piniához, ha az állapot valóban globális vagy az alkalmazás nem kapcsolódó részei között megosztott.
A provide/inject kiküszöböli a prop drilling-et az olyan adatoknál, amelyeket sok beágyazott komponens oszt meg (témák, locale, form/kontextus, plugin szolgáltatások).
A reaktív értékek nyújtásának ismerete (hogy a frissítések terjedjenek), az alapértelmezett/Symbol kulcsok használata, és megkülönböztetés a globális állapottól (Pinia) lehetővé teszi, hogy tisztán átadhasd a megosztott kontextust a mély komponensfa-szerkezeteken keresztül.