provide/inject એક પ્રાચીન ઘટક કોઈપણ વંશજ વર્ગને ડેટા પૂરી પાડી શકે છે, ગમે તેટલો ગહન હોય તો હોય, દરેક મધ્યવર્તી ઘટક દ્વારા props પસાર કર્યા વિના. તેઓ prop drilling સમસ્યાને હલ કરે છે.
App → Layout → Sidebar → Menu → MenuItem
જો માત્ર ને ની જરૂર હોય, તો તેને , અને (જે તેનો ઉપયોગ નથી કરતા) દ્વારા props તરીકે પાસ કરવું કરવું ખૂબ કંટાળાજનક અને બોજવણ છે. / આ મધ્યવર્તી બધાને છોડી દે છે.
MenuItemthemeLayoutSidebarMenu<!-- 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
પ્રતિક્રિયાશીલ ઓબ્જેક્ટ પૂરી પાડો (તેનો 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
પેટીમાં dependency-injection માટે provide/inject વાપરો; જ્યારે સ્થિતિ ખરેખર વૈશ્વિક હોય અથવા app ના અસંબંધિત ભાગો જોડે શેર થાય ત્યારે Pinia તરફ જાઓ.
provide/inject ડેટાની prop drilling દૂર કરે છે જે ઘણા નેસ્ટેડ ઘટકો શેર કરે છે (થીમ્સ, locale, ફોર્મ/context, plugin સેવાઓ).
પ્રતિક્રિયાશીલ મૂલ્યો પૂરી પાડવાની જાણકારી હોવી (જેથી અપડેટ્સ ફેલાય), defaults/Symbol keys વાપરો, અને તેને વૈશ્વિક સ્થિતિ (Pinia) થી અલગ પાડો તમને ઊંડા ઘટક વૃક્ષો દ્વારા શેર કરેલ context સાફ રીતે પાસ કરવા દે છે.