प्लगइन में वैश्विक प्रॉपर्टी और provide/inject
app.config.globalProperties.$myPlugin, इंजेक्शन के लिए app.provide() और TypeScript ऑगमेंटेशन
प्लगइन में वैश्विक प्रॉपर्टी और provide/inject, CoddyKit पर Vue Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Vue Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
सेवाएँ उपलब्ध कराने के दो तरीके
प्लगइन कार्यक्षमता साझा करने के दो तरीके दे सकते हैं: वैश्विक गुणधर्म, जो पारंपरिक विकल्प एपीआई शैली है और this.$x के माध्यम से पहुँच योग्य है, तथा provide/inject, जो संयोजन एपीआई शैली है। आधुनिक कोड provide/inject को प्राथमिकता देता है; विकल्प एपीआई वाले कोडबेस में वैश्विक गुणधर्म अब भी उपयोगी हैं।
app.config.globalProperties
app.config.globalProperties.$http = client, हर विकल्प एपीआई component में this.$http उपलब्ध कराता है। component के डेटा से टकराव से बचने के लिए नाम के आगे $ लगाने की परंपरा है।
import axios from 'axios'
export default {
install(app, options) {
const http = axios.create({ baseURL: options.baseURL })
app.config.globalProperties.$http = http
}
}विकल्प एपीआई में $http का उपयोग
विकल्प एपीआई component के भीतर, वैश्विक गुणधर्म this के माध्यम से उपलब्ध होता है।
export default {
async created() {
const res = await this.$http.get('/users')
this.users = res.data
},
data() {
return { users: [] }
}
}संयोजन एपीआई this का उपयोग क्यों नहीं कर सकता
<script setup> में component इंस्टेंस से जुड़ा हुआ कोई this नहीं होता। इसलिए this.$http काम नहीं करता। इसके बजाय संयोजन एपीआई इंजेक्ट किए गए मान पढ़ता है, और यही अनुशंसित तरीका है।
<script setup>
// this is undefined here, so this.$http is NOT available
// use inject() instead
</script>प्लगइन में provide करना
संयोजन एपीआई का समर्थन करने के लिए, प्लगइन को उसी सेवा को एक कुंजी के अंतर्गत app.provide भी करना चाहिए। दोनों उपलब्ध कराएँ: विकल्प एपीआई के लिए वैश्विक गुणधर्म और संयोजन एपीआई के लिए provide।
export const httpKey = Symbol('http')
export default {
install(app, options) {
const http = createHttp(options)
app.config.globalProperties.$http = http // Options API
app.provide(httpKey, http) // Composition API
}
}संयोजन एपीआई में इंजेक्ट करना
component inject(httpKey) के साथ सेवा पढ़ते हैं। निर्यात की गई Symbol कुंजी का उपयोग करने से स्ट्रिंग में टाइपिंग की गलतियों से बचाव होता है और टाइपिंग सक्षम होती है।
<script setup>
import { inject } from 'vue'
import { httpKey } from './plugins/http'
const http = inject(httpKey)
const res = await http.get('/profile')
</script>InjectionKey के साथ टाइप की गई इंजेक्शन कुंजियाँ
पूर्ण प्रकार-सुरक्षा के लिए, कुंजी का प्रकार InjectionKey<T> के साथ निर्धारित करें। इसके बाद inject सही मान-प्रकार का स्वतः अनुमान लगा लेता है।
import type { InjectionKey } from 'vue'
import type { AxiosInstance } from 'axios'
export const httpKey: InjectionKey<AxiosInstance> =
Symbol('http')
// inject(httpKey) is now typed as AxiosInstance | undefinedमॉड्यूल संवर्धन के साथ $http की टाइपिंग
this.$http को प्रकार-सुरक्षित बनाने के लिए, Vue के ComponentCustomProperties इंटरफ़ेस का संवर्धन किसी .d.ts फ़ाइल में करें। इसके बाद TypeScript को हर जगह this.$http का प्रकार पता होगा।
// shims.d.ts
import type { AxiosInstance } from 'axios'
declare module 'vue' {
interface ComponentCustomProperties {
$http: AxiosInstance
}
}
export {}संवर्धन कहाँ रहता है
संवर्धन एक मॉड्यूल होना चाहिए, जिस पर अंत में export {} ध्यान दें, और इसे आपके tsconfig.json में शामिल किया जाना चाहिए। इसे अपने प्लगइन के पास रखें, ताकि प्रकाशित होने पर प्रकार भी उसके साथ जाएँ।
// tsconfig.json (excerpt)
{
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}वैश्विक गुणधर्म: सीमित उपयोग करें
वैश्विक गुणधर्म सुविधाजनक होते हैं, लेकिन वे छिपी हुई निर्भरताएँ बनाते हैं — इससे component का परीक्षण करना और उसके व्यवहार को समझना कठिन हो जाता है। provide/inject को प्राथमिकता दें, क्योंकि यह स्पष्ट और ट्री-सीमित है। वैश्विक गुणधर्मों को केवल वास्तव में ऐप-व्यापी और विकल्प-एपीआई-अनुकूल उपयोगिताओं के लिए रखें।
दोनों संसारों का समर्थन
एक परिष्कृत प्लगइन विकल्प और संयोजन, दोनों एपीआई का समर्थन करता है: एक वैश्विक गुणधर्म निर्धारित करें AND मान को provide करें, तथा वैश्विक गुणधर्म और टाइप की गई इंजेक्शन कुंजी, दोनों के लिए प्रकार-संवर्धन उपलब्ध कराएँ। उपयोगकर्ता अपने component की शैली के अनुसार इनमें से किसी एक को चुन सकते हैं।
install(app, options) {
const service = build(options)
app.config.globalProperties.$service = service
app.provide(serviceKey, service)
}त्वरित जाँच
प्लगइन में वैश्विक गुणधर्म और provide/inject की अपनी समझ जाँचिए।
पुनरावलोकन
आपने प्लगइन सेवाएँ उपलब्ध कराना सीखा:
app.config.globalProperties.$http, विकल्प एपीआई केthis.$httpको सक्षम बनाता है- संयोजन एपीआई में
thisनहीं होता; इसके बजाय यहinjectका उपयोग करता है - पूर्ण कवरेज के लिए वैश्विक गुणधर्म और उपलब्ध कराया गया मान, दोनों दें
ComponentCustomPropertiesका संवर्धन करकेthis.$httpका प्रकार निर्धारित करें- इंजेक्ट मार्ग के लिए टाइप की गई
InjectionKeyका उपयोग करें
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 42
- पाठ
- 156
अक्सर पूछे जाने वाले प्रश्न
क्या “प्लगइन में वैश्विक प्रॉपर्टी और provide/inject” पाठ निःशुल्क है?
हाँ — Vue Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “प्लगइन में वैश्विक प्रॉपर्टी और provide/inject” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“प्लगइन में वैश्विक प्रॉपर्टी और provide/inject” में मैं क्या सीखूँगा?
app.config.globalProperties.$myPlugin, इंजेक्शन के लिए app.provide() और TypeScript ऑगमेंटेशन आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Vue Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Vue Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“प्लगइन में वैश्विक प्रॉपर्टी और provide/inject” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Vue Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Vue Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- प्लगइन आर्किटेक्चर और app.use()
- प्लगइन में वैश्विक प्रॉपर्टी और provide/inject
- नोटिफ़िकेशन और टोस्ट प्लगइन का उदाहरण
- Vue प्लगइन का प्रकाशन और टाइपिंग