provide/inject ఒక పూర్వీకుల భాగం ఏదైనా సంతానానికి డేటాను సরఫరా చేయటానికి అనుమతిస్తుంది, అది ఎంత లోతుగా ఉన్నా, ప్రతి మధ్యవర్తీ భాగం ద్వారా props పంపకుండా. అవి prop drilling సమస్యను సరిచేస్తాయి.
App → Layout → Sidebar → Menu → MenuItem
వేరే విధంగా MenuItem కు మాత్రమే theme అవసరమైతే, దానిని Layout, Sidebar మరియు Menu (ఇది ఉపయోగించనిది) ద్వారా prop గా పంపడం కష్టం మరియు చప్పుడు. 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
ప్రతిస్పందనశీల వస్తువు (the 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
provide/inject ను subtree లో dependency-injection కోసం ఉపయోగించండి; state నిజంగా గ్లోబల్ లేదా అనుబంధం లేని భాగాలలో పంచుకున్నప్పుడు Pinia కు వెళ్లండి.
provide/inject అనేక నెస్టెడ్ భాగాలు పంచుకున్న డేటా (థీమ్లు, లోకేల్, ఫారమ్/సందర్భం, ప్లగ్ఇన్ సేవలు) కోసం prop drilling ను తొలగిస్తుంది.
ప్రతిస్పందనశీల విలువలను సరఫరా చేయడం గురించి తెలుసుకోవడం (తెలుసుకోవడం అపడేట్లు ప్రచారం చేస్తాయి), default/సింబల్ కీలను ఉపయోగించుకోవడం మరియు దానిని గ్లోబల్ స్థితి (Pinia) నుండి వేరు చేయడం మీకు లోతైన భాగ చెట్ల ద్వారా షేర్ చేసిన సందర్భాన్ని శుభ్రంగా పంచుకోవడానికి అనుమతిస్తుంది.