provide ਅਤੇ inject ਕਿਸ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਹਨ?

Question

Accepted Answer

`provide`/`inject` ਇੱਕ **ancestor component ਨੂੰ ਕਿਸੇ ਵੀ descendant ਨੂੰ ਡਾਟਾ ਸਪਲਾਈ ਕਰਨ ਦਿਖਦਾ ਹੈ**, ਭਾਵੇਂ ਇਹ ਕਿੰਨਾ ਵੀ ਡੂੰਘਾ ਹੋਵੇ, ਹਰ ਵਿੱਚਕਾਰਲੇ component ਦੁਆਰਾ props ਪਾਸ ਕੀਤੇ ਬਿਨਾਂ। ਇਹ **prop drilling** ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਦੇ ਹਨ। ## ਸਮੱਸਿਆ: prop drilling ```text App → Layout → Sidebar → Menu → MenuItem ``` ਜੇਕਰ ਸਿਰਫ `MenuItem` ਨੂੰ `theme` ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਇਸ ਨੂੰ `Layout`, `Sidebar`, ਅਤੇ `Menu` (ਜੋ ਇਸਨੂੰ ਵਰਤਦੇ ਨਹੀਂ) ਦੁਆਰਾ prop ਦੇ ਤੌਰ ਤੇ ਪਾਸ ਕਰਨਾ ਬੋਝਲ ਅਤੇ ਅਵਿਵਸਥਿਤ ਹੈ। `provide`/`inject` ਵਿੱਚਕਾਰ ਛੱਡ ਦਿੰਦੇ ਹਨ। ## Ancestor ਵਿੱਚ Providing ```vue ``` ## ਕਿਸੇ ਵੀ descendant ਵਿੱਚ Injecting ```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** ਆਬਜੈਕਟ ਪ੍ਰਦਾਨ ਕਰੋ (the `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 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)। Jehi ਜਾਣਨਾ ਕਿ reactive values ਪ੍ਰਦਾਨ ਕਰਨੇ ਹਨ (ਤਾਂ ਕਿ updates propagate ਹੋਣ), defaults/Symbol keys ਵਰਤਣੀਆਂ ਹਨ, ਅਤੇ ਇਸ ਨੂੰ global state (Pinia) ਤੋਂ ਵੱਖ ਕਰਨਾ ਹੈ, ਤੁਹਾਨੂੰ ਸਾਂਝਿਆ context ਨੂੰ ਡੂੰਘੇ component trees ਵਿੱਚ ਸਾਫ਼ ਤਰੀਕੇ ਨਾਲ ਪਾਸ ਕਰਨ ਦਿੰਦਾ ਹੈ।