provide/inject पूर्वज घटक कोणत्याही वंशजला डेटा प्रदान करू शकतो, कितीही खोल असूना, प्रत्येक मध्यवर्ती घटकाद्वारे props पास केल्याशिवाय. ते prop drilling सोडवतात.
App → Layout → Sidebar → Menu → MenuItem
जर फक्त ला आवश्यक असेल, तर ते , , आणि (जे ते वापरत नाहीत) द्वारे prop म्हणून पास करणे कंटाळवाणे आणि गोंगाट असते. / मध्यम वगळते.
MenuItemthemeLayoutSidebarMenuprovideinject<!-- 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
प्रतिक्रियाशील ऑब्जेक्ट (the ref, त्याचे .value नाही) प्रदान करा जेणेकरून जेव्हा ते बदलते, सर्व इंजेक्टिंग घटक अपडेट होतात.
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
सबट्रीमध्ये अवलंबित्व-इंजेक्शनसाठी provide/inject वापरा; जेव्हा स्थिती खरोखर विश्वव्यापी असते किंवा अॅपच्या संबंधित न असलेल्या भागांमध्ये सामायिक असते तेव्हा Pinia साठी पोहोचा.
provide/inject असे डेटा दूर करतात ज्याचे अनेक नेस्टेड घटक सामायिक करतात (थीम, लोकल, फॉर्म/संदर्भ, प्लगइन सेवा).
प्रतिक्रियाशील मूल्ये कसे प्रदान करावेत हे जाणून (जेणेकरून अपडेट प्रसारित होतात), डिफॉल्ट/Symbol की वापरा, आणि त्यास वैश्विक स्थिती (Pinia) पासून वेगळे केले, आपण गहन घटक वृक्षांद्वारे सामायिक संदर्भ स्वच्छपणे पास करू शकता.