provide/inject omogočita predniku komponente, da preskrbi podatke kateremu koli potomcu, ne glede na to, kako globoko je, brez prehoda svojstev skozi vsako vmesno komponento. Rešita prop drilling.
App → Layout → Sidebar → Menu → MenuItem
Če samo MenuItem potrebuje theme, je prehajanje kot svojstva skozi Layout, Sidebar in Menu (ki ga ne uporabljajo) dolgočasno in nepregledano. provide/inject preskočita sredino.
<!-- 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
Zagotovi reaktivni objekt (the ref, ne njegov .value) tako da se bo spremenil, ko ga posodabljajo vse komponente, ki ga vbrizgavajo.
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
Uporabi provide/inject za vbrizgavanje odvisnosti znotraj poddreva; izberi Pinio, ko je stanje resnično globalno ali deljeno med nepovezanimi deli aplikacije.
provide/inject odpravita prop drilling za podatke, ki jih deli več gnezdenih komponent (teme, jezike, obrazce/kontekst, storitve vtičnikov).
Znanje zagotavljati reaktivne vrednosti (tako da se spremembe razširijo), uporaba privzetih vrednosti/Symbol ključev in razlikovanje med globalnim stanjem (Pinia) vam omogoča čisto prehajanje deljenih kontekstov skozi globoka drevesa komponent.