provide/inject ایک ancestor component کو کسی بھی descendant کو ڈیٹا فراہم کرنے دیتے ہیں، چاہے وہ کتنا بھی گہرا ہو، ہر intermediate component کے ذریعے props پاس کیے بغیر۔ وہ prop drilling حل کرتے ہیں۔
App → Layout → Sidebar → Menu → MenuItem
اگر صرف MenuItem کو theme کی ضرورت ہے، تو اسے prop کے طور پر Layout، Sidebar، اور Menu کے ذریعے پاس کرنا (جو اسے استعمال نہیں کرتے) تھکا دینے والا اور شور مچاتا ہے۔ 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 فراہم کریں (ref، اس کی .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 کے غیر متعلقہ حصوں میں 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 کے ذریعے پاس کرنے دیتا ہے۔
تفصیلی جوابات کے ساتھ IT انٹرویو سوالات کی ایک لائبریری — جونیئر سے سینئر تک۔
عطیہ دیں