Vue Academy · पाठ

App-Level State के लिए Provide/Inject

Global state, theming और i18n के लिए app.provide() तथा सरल मामलों में Pinia से बचना।

पाठ 4, कुल 4 में से13 चरण

App-Level State के लिए Provide/Inject, CoddyKit पर Vue Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Vue Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

ऐप्लिकेशन-स्तरीय provide

घटक-स्तरीय provide के अलावा, आप app इंस्टेंस पर app.provide के माध्यम से भी मान उपलब्ध करा सकते हैं। यह मान app के हर घटक के लिए उपलब्ध हो जाता है।

const app = createApp(App);
app.provide("appVersion", "1.0.0");

वैश्विक सेवाएँ उपलब्ध कराना

ऐप-स्तरीय provide, auth सेवा, HTTP क्लाइंट या लॉग दर्ज करने वाली सेवा जैसे सिंगलटन के लिए बिल्कुल उपयुक्त है—ऐसी चीज़ें जिनकी पूरे app को आवश्यकता हो सकती है।

import { authService } from "./auth";
app.provide("auth", authService);

वैश्विक सेवा का उपयोग

कोई भी घटक वृक्ष में कहीं से भी कुंजी के माध्यम से सेवा को inject कर सकता है, और इसके लिए न तो प्रॉप ड्रिलिंग की आवश्यकता होती है, न ही अतिरिक्त जोड़ने का काम करना पड़ता है।

const auth = inject("auth");
auth.login(credentials);

वैश्विक मानों के लिए Symbol कुंजियाँ

पूरे app में उपयोग की जाने वाली सेवाओं के लिए निर्यात की गई Symbol कुंजियाँ, आदर्श रूप से प्रकार वाली, पूरे कोडबेस में injection को सुरक्षित और आसानी से खोजने योग्य बनाए रखती हैं।

// keys.ts
export const authKey: InjectionKey<AuthService> = Symbol("auth");
// main.ts
app.provide(authKey, authService);

खोज का क्रम

जब app-स्तरीय और घटक-स्तरीय provide में समान कुंजी का उपयोग हो, तो उस घटक के वंशजों के लिए सबसे निकट का प्रदाता प्राथमिकता पाता है। app-स्तरीय provide वैश्विक वैकल्पिक मान की तरह काम करता है।

अधिक-पठन वाले परिदृश्य

जब कई घटक केवल साझा डेटा—जैसे theme, locale और config—को पढ़ते हैं, तब provide/inject बहुत प्रभावी होता है। उपभोक्ताओं को लिखने की आवश्यकता नहीं होती, इसलिए यह तरीका सरल और पूर्वानुमेय रहता है।

Pinia की तुलना

Pinia Vue की आधिकारिक स्थिति-प्रबंधन लाइब्रेरी है। यह डेवलपर टूल, मॉड्यूलर स्टोर, क्रियाएँ, गेटर और टाइम-ट्रैवल डिबगिंग उपलब्ध कराती है—जटिल और बार-बार बदली जाने वाली वैश्विक स्थिति के लिए यह आदर्श है।

import { defineStore } from "pinia";
export const useAuth = defineStore("auth", { /* ... */ });

जब provide/inject पर्याप्त हो

अधिकतर केवल-पठन वाले साझा मानों के लिए provide/inject स्टोर के अतिरिक्त बोझ से बचाता है। यह हल्का, अंतर्निहित और theme, i18n या inject की गई सेवाओं के लिए स्पष्ट है।

Pinia का उपयोग कब करें

जब स्थिति कई जगहों से बदली जाती हो, डेवलपर टूल की आवश्यकता हो, स्थिति को स्थायी रूप से सहेजना हो या जटिल व्युत्पन्न डेटा हो, तब Pinia चुनें। यह अलग-अलग provide/inject जोड़ियों की तुलना में तर्क को बेहतर ढंग से केंद्रीकृत करता है।

दोनों को साथ उपयोग करना

इनमें से किसी एक को चुनना अनिवार्य नहीं है। आप app डेटा के लिए Pinia और फ़ॉर्म या UI theme जैसे हल्के घटक-वृक्ष संदर्भ के लिए provide/inject का उपयोग कर सकते हैं।

provide("formContext", { register, errors });

परीक्षण संबंधी विचार

जब आप ऐसे घटक का यूनिट परीक्षण कर रहे हों जो inject करता है, तो परीक्षण माउंट विकल्पों में global.provide के माध्यम से मान उपलब्ध कराएँ, ताकि घटक को एक स्टब मिल सके।

mount(MyComponent, {
  global: { provide: { auth: fakeAuth } }
});

त्वरित जाँच

Pinia की तुलना में provide/inject को कब प्राथमिकता दी जाती है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

आपने सीखा कि app.provide वैश्विक सेवाओं को हर घटक के लिए उपलब्ध कराता है और उन्हें कहीं से भी कुंजी के माध्यम से inject किया जा सकता है। अधिक-पठन वाले साझा संदर्भों के लिए provide/inject प्रभावी है, जबकि डेवलपर टूल के समर्थन वाले जटिल और बार-बार बदले जाने वाले वैश्विक state के लिए Pinia उपयुक्त है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 42
पाठ: 156

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “App-Level State के लिए Provide/Inject” पाठ निःशुल्क है?

हाँ — Vue Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “App-Level State के लिए Provide/Inject” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“App-Level State के लिए Provide/Inject” में मैं क्या सीखूँगा?

Global state, theming और i18n के लिए app.provide() तथा सरल मामलों में Pinia से बचना। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Vue Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Vue Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“App-Level State के लिए Provide/Inject” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Vue Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Vue Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Vue Academy पर वापस जाएँ