provide/inject एक ancestor component को किसी भी descendant को डेटा प्रदान करने की अनुमति देते हैं, चाहे वह कितना भी गहरा हो, प्रत्येक intermediate component के माध्यम से props पास किए बिना। वे prop drilling समस्या को हल करते हैं।
App → Layout → Sidebar → Menu → MenuItem
यदि केवल MenuItem को theme की आवश्यकता है, तो इसे Layout, Sidebar, और Menu (जो इसका उपयोग नहीं करते) के माध्यम से prop के रूप में पास करना बोझिल और शोरगुल भरा है। provide/inject मध्य को छोड़ देते हैं।
<!-- 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
reactive object प्रदान करें (the ref, not its .value) ताकि जब यह बदले, सभी injecting components अपडेट हो जाएं।
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
एक subtree के भीतर dependency-injection के लिए provide/inject का उपयोग करें; जब state सच में global हो या app के असंबंधित parts में साझा हो तो Pinia का उपयोग करें।
provide/inject उन डेटा के लिए prop drilling को समाप्त करते हैं जो कई nested components साझा करते हैं (themes, locale, form/context, plugin services)।
Reactive values प्रदान करना जानना (ताकि updates propagate हो), defaults/Symbol keys का उपयोग करना, और इसे global state (Pinia) से अलग करना आपको deep component trees के माध्यम से shared context को cleanly पास करने देता है।