पृष्ठभूमि

निम्न पर विचार करें:

// app.js
import API from 'utils/API';

const api = new API(config.app.urls.api, endpoints, token);

app.provide('$api', api);

पिछले 24 घंटों में मैंने जो कुछ भी पढ़ा है, उसके आधार पर, Vue.js 3 को 'सेवा' प्रदान करने की सलाह दी गई विधि ऊपर दी गई है।

हालांकि, उपरोक्त के साथ समस्या यह है कि अब मैं एपीआई इंस्टेंस को inject विधि का उपयोग Vue घटक के बाहर नहीं किया जा सकता है।

जैसे, जब मैं अपने Vuex मॉड्यूल में एपीआई इंस्टेंस आयात करना चाहता हूं, तो मैं नहीं कर सकता ...

प्रश्न

क्या Vue घटक के बाहर प्रदान की गई सेवा तक पहुँचने का कोई 'सलाह' तरीका है? या नीचे दिए गए मेरे प्रस्तावित समाधानों में से एक है कि इसे चाहिए कैसे किया जाए?

संभव समाधान

प्रस्तावित समाधान 1

Vue को सेवा प्रदान करने के बजाय, हम इसे केवल वैश्विक गुणों में जोड़ सकते हैं जैसे:

// app.js
app.config.globalProperties.$api = api;

और फिर हम इसे स्टोर में इस तरह एक्सेस कर सकते हैं:

// some-vuex-module.js
import { getCurrentInstance } from 'vue';

const api = getCurrentInstance().appContext.config.globalProperties.$api;

मैं अपने ऐप में कुछ चीजों के लिए उपरोक्त का उपयोग कर रहा हूं लेकिन एपीआई सेवा के लिए इसे इस तरह से करना गलत लगता है।

प्रस्तावित समाधान 2

एक और समाधान जिसके बारे में मैंने सोचा था कि एपीआई इंस्टेंस को खिड़की पर उपलब्ध कराना था:

// app.js
import API from 'utils/API';

const api = window.api = new API(config.app.urls.api, endpoints, token);

app.provide('$api', api);

हालांकि उपरोक्त एक विरोधी पैटर्न की तरह लगता है ...

3
Ben Carey 6 जिंदा 2022, 15:47

1 उत्तर

सबसे बढ़िया उत्तर

मॉड्यूलर वातावरण में बेहतर तरीका (जो आमतौर पर Vue 3 सेटअप है) केवल api को उन जगहों पर आयात करना है जहां इसका उपयोग किया जाता है, भले ही यह घटक के अंदर या बाहर उपयोग किया गया हो।

Vue वैश्विक संपत्ति के साथ समाधान उस समय उत्पन्न हुआ जब Vue अनुप्रयोग आवश्यक रूप से मॉड्यूलर नहीं थे, इसलिए वे वैश्विक अनुप्रयोग दायरे के रूप में Vue उदाहरण पर निर्भर थे। वर्तमान में यह केवल उन गुणों के लिए उपयुक्त है जो मुख्य रूप से एक टेम्पलेट में उपयोग किए जाते हैं और उन्हें आयात करने और प्रदर्शित करने के लिए बॉयलरप्लेट कोड की आवश्यकता होती है। उदाहरण $t vue-i18n में है।

provide/inject के साथ समाधान उन मामलों के लिए उपयोगी है, जिन्हें डिपेंडेंसी इंजेक्शन की आवश्यकता होती है। एक सामान्य मामला एक पुस्तकालय है जिसके लिए निर्भरता को शिथिल रूप से युग्मित करने की आवश्यकता होती है। एक और यह है कि एक निर्भरता घटक पदानुक्रम पर निर्भर करती है और घटकों के बीच भिन्न हो सकती है।

window के साथ समाधान से बचा जाना चाहिए, जब तक कि एप्लिकेशन को अलग-अलग स्क्रिप्ट में विभाजित नहीं किया जाता है जो सामान्य जेएस मॉड्यूल के माध्यम से बातचीत नहीं कर सकता है। फिर भी समस्या यह है कि वैश्विक चर को परिभाषित करने वाली एक स्क्रिप्ट को इसका उपयोग करने वालों से पहले लोड किया जाना चाहिए।

2
Estus Flask 6 जिंदा 2022, 16:29
आपके उत्तर के लिए धन्यवाद, और मैं window समाधान के बारे में पूरी तरह सहमत हूं। आयात करने में समस्या यह है कि इंस्टेंस पहले से ही विशिष्ट विकल्पों के साथ त्वरित है और मैं इसे Vuex मॉड्यूल में आयात नहीं कर सकता... या मैं कर सकता हूँ?
 – 
Ben Carey
6 जिंदा 2022, 16:27
क्या आप स्पष्ट कर सकते हो? आपको किसी मॉड्यूल में export const api = new API(...) की आवश्यकता है, फिर आप इसे आयात कर सकते हैं जहां आप इसका उपयोग करते हैं। यह एक अलग मॉड्यूल में किया जाना चाहिए न कि प्रवेश बिंदु (जैसे main.js) में सर्कुलर डिप्स से बचने के लिए
 – 
Estus Flask
6 जिंदा 2022, 16:31
हां, मैं बस यही सोच रहा था - मैं सिर्फ एक सिंगलटन/मॉड्यूल बना सकता हूं और उसे आयात कर सकता हूं, मैं बस झिझक रहा था क्योंकि मैं किसी भी प्रदाता को एक ही स्थान पर बनाने के लिए सभी तर्क रखना चाहता था यानी ऐप.जेएस।
 – 
Ben Carey
6 जिंदा 2022, 16:34
1
यहां एक परेशानी मुक्त तरीका है कि प्रवेश बिंदु को दुबला रखा जाए और वहां सेवाओं को परिभाषित न किया जाए। आप निश्चित रूप से इसे वैसे ही कर सकते हैं जैसे आपने कोशिश की और प्रदान/इंजेक्शन का उपयोग किया, लेकिन केवल तभी जब सेवाओं का विशेष रूप से घटकों के अंदर उपयोग किया जाता है - जो कि ज्यादातर बार नहीं होता है, खासकर Vuex के लिए।
 – 
Estus Flask
6 जिंदा 2022, 16:38
उपरोक्त के लिए फिर से धन्यवाद! बस आपके लिए एक त्वरित जानकारी मिली है... मैं अपनी परियोजना को थोड़ा पुनर्गठित करने वाला हूं ताकि यह प्रतिबिंबित हो सके कि आपने क्या उल्लेख किया है यानी ऐप.जेएस को दुबला रखें और निर्भरता आयात करने और ऐप इंस्टेंस बनाने के लिए इसका इस्तेमाल करें। मेरी सोच, इस समय, 'प्रदाताओं' नामक एक फ़ोल्डर बनाना है और इसे प्रत्येक निर्भरता के लिए सेवा प्रदाताओं के साथ पॉप्युलेट करना है - बहुत कुछ लारवेल/लुमेन की तरह। हालाँकि, क्या JS में इसके लिए अधिक सामान्य नाम है?
 – 
Ben Carey
6 जिंदा 2022, 16:56