provide اور inject کس لیے استعمال ہوتے ہیں؟

Question

Accepted Answer

`provide`/`inject` ایک **ancestor component کو کسی بھی descendant کو ڈیٹا فراہم کرنے دیتے ہیں**، چاہے وہ کتنا بھی گہرا ہو، ہر intermediate component کے ذریعے props پاس کیے بغیر۔ وہ **prop drilling** حل کرتے ہیں۔ ## The problem: prop drilling ```text App → Layout → Sidebar → Menu → MenuItem ``` اگر صرف `MenuItem` کو `theme` کی ضرورت ہے، تو اسے prop کے طور پر `Layout`، `Sidebar`، اور `Menu` کے ذریعے پاس کرنا (جو اسے استعمال نہیں کرتے) تھکا دینے والا اور شور مچاتا ہے۔ `provide`/`inject` درمیانی چیزوں کو چھوڑ دیتے ہیں۔ ## Ancestor میں فراہم کرنا ```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 فراہم کریں (`ref`، اس کی `.value` نہیں) تاکہ جب یہ تبدیل ہو، تمام injecting components اپڈیٹ ہوں۔ ## Libraries میں Symbol key استعمال کریں ```js import { themeKey } from "./keys"; // export const themeKey = Symbol() provide(themeKey, theme); // avoids string-key collisions ``` ## provide/inject بمقابلہ 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 ``` **subtree کے اندر dependency-injection** کے لیے `provide`/`inject` استعمال کریں؛ جب state واقعی global ہو یا app کے غیر متعلقہ حصوں میں shared ہو تو Pinia کی طرف جائیں۔ ## یہ کیوں اہم ہے `provide`/`inject` prop drilling کو ختم کرتے ہیں اس ڈیٹا کے لیے جو بہت سے nested components شیئر کرتے ہیں (themes، locale، form/context، plugin services)۔ یہ جاننا کہ reactive values فراہم کریں (تاکہ updates پھیلیں)، defaults/Symbol keys استعمال کریں، اور اسے global state (Pinia) سے علیحدہ کریں آپ کو shared context کو صاف ستھرے طریقے سے گہرے component trees کے ذریعے پاس کرنے دیتا ہے۔