provide/inject i lejojnë një komponenti paraardhëse të furnizojë të dhëna për ndonjë përpjekje të zbritur, pavarësisht se sa e thellë është, pa i kaluar props-et përmes çdo komponente të ndërmjetme. Ato zgjidhin prop drilling.
App → Layout → Sidebar → Menu → MenuItem
Nëse vetëm MenuItem ka nevojë për theme, kalimi i tij si prop përmes Layout, Sidebar dhe Menu (të cilat nuk e përdorin) është i lodhshëm dhe zhurmacak. provide/inject e anashkalojnë mesin.
<!-- 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
Furnizo objektin reaktiv (the ref, jo .value të tij) kështu që kur ndryshon, të gjitha komponentët që injektojnë përditësohen.
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
Përdor provide/inject për injektim varësie brenda një nënpeme; kalo në Pinia kur gjendja është vërtet globale ose e ndarë në pjesë jo të lidhura të aplikacionit.
provide/inject eliminojnë prop drilling për të dhëna që shumë komponente të mbivendosura ndajnë (tema, lokale, forma/kontekst, shërbime shtesash).
Dija për të furnizuar vlera reaktive (kështu që përditësimet përhapen), përdorimi i çelësave të parazgjedhur/Symbol dhe dallim nga gjendja globale (Pinia) ju lejon të kaloni kontekstin e ndarë në mënyrë të pastër përmes pemëve të thella të komponenteve.