provide र inject किनको लागि प्रयोग गरिन्छ?

Question

Accepted Answer

`provide`/`inject` ले **ancestor component ले कुनै पनि descendant लाई डेटा सप्लाई गर्न सक्छ**, जति पनि गहिरो होस्, props को माध्यमबाट हरेक intermediate component बाट गुजारी नपरे। यो **prop drilling** को समस्या समाधान गर्छ। ## समस्या: prop drilling ```text App → Layout → Sidebar → Menu → MenuItem ``` यदि केवल `MenuItem` ले `theme` आवश्यकता छ, यसलाई prop को रूपमा `Layout`, `Sidebar`, र `Menu` (जो यो प्रयोग गर्दैनन्) को माध्यमबाट पठाउनु बोझस्त र शोरपूर्ण छ। `provide`/`inject` बिचमा छोड़दिन्छ।n ## Ancestor मा provide गर्दै ```vue ``` ## कुनै पनि descendant मा inject गर्दै ```vue ``` ## यो reactive राख्नुहोस् ```js // ✅ 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 provide गर्नुहोस् (the `ref`, नाकि यसको `.value`) ताकि यो परिवर्तन हुँदा, सबै injecting components update हुन्छ। ## Libraries मा Symbol key प्रयोग गर्नुहोस् ```js import { themeKey } from "./keys"; // export const themeKey = Symbol() provide(themeKey, theme); // avoids string-key collisions ``` ## provide/inject vs Pinia ```text 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` **subtree भित्र dependency-injection** को लागि प्रयोग गर्नुहोस्; Pinia को लागि पुग्नुहोस् जब state साँच्चै global छ वा app को सम्बन्धहीन भागहरू मार्फत साझा छ। ## यो किन महत्त्वपूर्ण छ `provide`/`inject` prop drilling लाई हटाउदछ डेटा को लागि जो धेरै nested components सँझदिन्छ (themes, locale, form/context, plugin services)। Reactive values provide गर्न जान्न (ताकि updates propagate हुन्छ्न्), defaults/Symbol keys प्रयोग गर्न, र यसलाई global state (Pinia) बाट अलग गर्न सक्नु गहिरो component trees को माध्यमबाट shared context सफलतापूर्वक पठाउन दिन्छ।