Vue एप्लिकेशन में अपनी निर्भरता को कैसे व्यवस्थित करें

Vue से परिचित हर कोई जानता है कि Vue एप्लिकेशन में एक प्रविष्टि बिंदु है - main.js फ़ाइल। वहां, Vue का एक उदाहरण बनाने के अलावा, आपके सभी वैश्विक निर्भरता (निर्देश, घटक, प्लगइन्स) का एक प्रकार और आयात निर्भरता इंजेक्शन है। बड़ी परियोजना, अधिक निर्भरता बन जाती है, जो, इसके अलावा, प्रत्येक का अपना कॉन्फ़िगरेशन होता है। नतीजतन, हमें सभी कॉन्फ़िगरेशन के साथ एक बड़ी फ़ाइल मिलती है।
यह लेख चर्चा करेगा कि इससे बचने के लिए वैश्विक निर्भरता को कैसे व्यवस्थित किया जाए।

इसे खुद क्यों लिखें?

कई लोग सोच सकते हैं - ऐसा क्यों आवश्यक है यदि उदाहरण के लिए, नुक्सट , जो आपके लिए ऐसा करेगा? अपनी परियोजनाओं में, मैंने भी इसका इस्तेमाल किया, लेकिन सरल परियोजनाओं में यह बेमानी हो सकता है। इसके अलावा, किसी ने विरासत कोड वाली परियोजनाओं को रद्द नहीं किया है जो आपके सिर पर बर्फ की तरह गिरती हैं। और वहां ढांचे को कनेक्ट करें - व्यावहारिक रूप से इसे खरोंच से करें।

प्रेरक

इस तरह के एक संगठन के आयोजक Nuxt थे। यह मेरे द्वारा Vue के साथ एक बड़े प्रोजेक्ट पर उपयोग किया गया था।
Nuxt में एक बढ़िया फीचर है- प्लगइन्स। प्रत्येक प्लगइन एक फ़ाइल है जो एक फ़ंक्शन का निर्यात करती है। कॉन्फ़िगरेशन को फ़ंक्शन में पास किया जाता है, जो इंस्टेंस बनाते समय और साथ ही पूरे स्टोर पर Vue कंस्ट्रक्टर को पास किया जाएगा।

इसके अलावा, प्रत्येक प्लगइन में एक अत्यंत उपयोगी सुविधा, inject उपलब्ध है। यह Vue के मूल उदाहरण और store ऑब्जेक्ट के लिए एक निर्भरता इंजेक्शन बनाता है। और इसका मतलब है कि प्रत्येक घटक में, प्रत्येक भंडारण फ़ंक्शन में, इसके माध्यम से निर्दिष्ट निर्भरता उपलब्ध होगी।

यह कहां काम आ सकता है?

इस तथ्य के अलावा कि main.js काफी वजन कम हो जाएगा, आपको अनावश्यक आयात के बिना आवेदन में कहीं भी निर्भरता का उपयोग करने का अवसर मिलेगा।

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

एक और उदाहरण है , प्रतिक्षण । इस प्लगइन के डेवलपर्स ने आगे $wait वेट प्रॉपर्टी को न केवल Vue उदाहरण में जोड़ा, बल्कि vuex स्टोर में भी जोड़ा। प्लगइन की बारीकियों को देखते हुए, यह बेहद उपयोगी साबित होता है। उदाहरण के लिए, स्टोर में एक कार्रवाई होती है जिसे कई घटकों पर कहा जाता है। और प्रत्येक मामले में, आपको कुछ तत्व पर लोडर दिखाने की आवश्यकता है। प्रत्येक एक्शन कॉल से पहले और बाद में $wait.start('action') और $wait.end('action') कॉल करने के बजाय, आप एक्शन में ही इन तरीकों को एक बार कॉल कर सकते हैं। और यह dispatch('wait/start', 'action' {root: true}) तुलना में बहुत अधिक पठनीय और कम dispatch('wait/start', 'action' {root: true}) । स्टोर के मामले में, यह सिंथेटिक चीनी है।

शब्दों से लेकर कोड तक

परियोजना की मूल संरचना

आइए देखें कि परियोजना अब कैसी दिखती है:
src
- store
- App.vue
- main.js

main.js कुछ इस तरह दिखता है:

 import Vue from 'vue'; import App from './App.vue'; import store from './store'; new Vue({ render: h => h(App), store }).$mount('#app'); 

हम पहली निर्भरता को जोड़ते हैं

अब हम axios को अपनी परियोजना से जोड़ना चाहते हैं और इसके लिए किसी प्रकार का विन्यास बनाना चाहते हैं। मैंने Nuxt शब्दावली का अनुसरण किया और src में एक plugins डायरेक्टरी बनाई। निर्देशिका के अंदर index.js और axios.js ।

src
- plugins
-- index.js
-- axios.js
- store
- App.vue
- main.js

जैसा कि ऊपर उल्लेख किया गया है, प्रत्येक प्लगइन को एक फ़ंक्शन निर्यात करना होगा। उसी समय, फ़ंक्शन के अंदर हम स्टोर तक पहुंचना चाहते हैं और बाद में inject फ़ंक्शन।

axios.js

 import axios from 'axios'; export default function (app) { //       – , , interceptors  .. axios.defaults.baseURL = process.env.API_BASE_URL; axios.defaults.headers.common['Accept'] = 'application/json'; axios.defaults.headers.post['Content-Type'] = 'application/json'; axios.interceptors.request.use(config => { ... return config; }); } 

index.js :

 import Vue from 'vue'; import axios from './axios'; export default function (app) { let inject = () => {}; //   inject,        Dependency Injection axios(app, inject); //       Vue    } 

जैसा कि आप देख सकते हैं, index.js फ़ाइल फ़ंक्शन को भी निर्यात करती है। यह app ऑब्जेक्ट को पास करने में सक्षम होने के लिए किया जाता है। अब main.js बदलें और इस फ़ंक्शन को कॉल करें।

main.js :

 import Vue from 'vue'; import App from './App.vue'; import store from './store'; import initPlugins from './plugins'; //    // ,    Vue,  ,     initPlugins const app = { render: h => h(App), store }; initPlugins(app); new Vue(app).$mount('#app'); //   initPlugins    

परिणाम

इस स्तर पर, हमने यह हासिल कर लिया है कि हमने प्लगइन कॉन्फ़िगरेशन को main.js से एक अलग फ़ाइल में निकाल दिया है।

वैसे, हमारे सभी प्लगइन्स के लिए app ऑब्जेक्ट को पास करने का लाभ यह है कि प्रत्येक प्लगइन के अंदर अब हमारे पास स्टोर तक पहुंच है। आप इसे स्वतंत्र रूप से कॉल commit , dispatch के साथ-साथ store.state और store.getters तक पहुँच store.state करके उपयोग कर सकते हैं।

यदि आप ES6- शैली पसंद करते हैं, तो आप यह भी कर सकते हैं:

axios.js

 import axios from 'axios'; export default function ({store: {dispatch, commit, state, getters}}) { ... } 

दूसरा चरण - निर्भरता इंजेक्शन

हमने पहले ही प्लगइन बना लिया है और अब हमारी परियोजना इस तरह दिखती है:

src
- plugins
-- index.js
-- axios.js
- store
- App.vue
- main.js

चूंकि अधिकांश पुस्तकालयों में जहां यह वास्तव में आवश्यक है, Vue.use का उपयोग करके डिपेंडेंसी इंजेक्शन पहले से ही लागू है, हम अपना स्वयं का सरल प्लगइन बनाएंगे।

उदाहरण के लिए, जो vue-wait करता है उसे दोहराने की कोशिश vue-wait । यह एक भारी पुस्तकालय है, इसलिए यदि आप लोडर को एक बटन पर दिखाना चाहते हैं, तो इसे छोड़ देना बेहतर है। हालाँकि, मैं इसकी सुविधा का विरोध नहीं कर सका और इसकी परियोजना में इसकी बुनियादी कार्यक्षमता को दोहराया गया, जिसमें स्टोर में सिनिटिक शुगर भी शामिल थी।

प्लगइन प्रतीक्षा करें

plugins निर्देशिका में एक और फ़ाइल बनाएँ - wait.js

मेरे पास पहले से ही एक vuex मॉड्यूल है, जिसे मैंने wait भी कहा है। वह तीन सरल कदम करता है:

- start - action की स्टेट प्रॉपर्टी को action टू सेट नाम दिया गया true
- end - राज्य से हटाता है एक action नामक वस्तु की एक संपत्ति
- is - राज्य से action नामक एक वस्तु की संपत्ति प्राप्त करता action

इस प्लगइन में हम इसका उपयोग करेंगे।

wait.js

 export default function ({store: {dispatch, getters}}, inject) { const wait = { start: action => dispatch('wait/start', action), end: action => dispatch('wait/end', action), is: action => getters['wait/waiting'](action) }; inject('wait', wait); } 

और हमारे प्लगइन कनेक्ट:

index.js :

 import Vue from 'vue'; import axios from './axios'; import wait from './wait'; export default function (app) { let inject = () => {}; Injection axios(app, inject); wait(app, inject); } 

कार्य इंजेक्षन

अब हम inject फ़ंक्शन को लागू करते हैं।

 //   2 : // name – ,       this.  ,   Vue        Dependency Injection // plugin – ,       this.  ,  ,           let inject = (name, plugin) => { let key = `$${name}`; //      app[key] = plugin; //     app app.store[key] = plugin; //     store //  Vue.prototype Vue.use(() => { if (Vue.prototype.hasOwnProperty(key)) { return; } Object.defineProperty(Vue.prototype, key, { get () { return this.$root.$options[key]; } }); }); }; 

Vue.prototype का जादू

अब जादू के बारे में। Vue प्रलेखन का कहना है कि यह Vue.prototype.$appName = ' '; लिखने के लिए पर्याप्त है Vue.prototype.$appName = ' '; और $appName उपलब्ध होगा।

हालांकि, वास्तव में यह पता चला कि ऐसा नहीं है। गुग्लिंग के कारण, इस बात का कोई जवाब नहीं था कि इस तरह के डिजाइन ने काम क्यों नहीं किया। इसलिए, मैंने प्लगइन के लेखकों से संपर्क करने का फैसला किया, जिन्होंने पहले से ही इसे लागू किया है।

वैश्विक मिश्रण

जैसा कि हमारे उदाहरण में, मैंने vue-wait plugin कोड को देखा। वे इस तरह के कार्यान्वयन की पेशकश करते हैं (स्पष्टता के लिए स्रोत कोड साफ किया जाता है):

 Vue.mixin({ beforeCreate() { const { wait, store } = this.$options; let instance = null; instance.init(Vue, store); // inject to store this.$wait = instance; // inject to app } }); 

एक प्रोटोटाइप के बजाय, यह एक वैश्विक मिश्रण का उपयोग करने का प्रस्ताव है। प्रभाव मूल रूप से समान है, शायद, कुछ बारीकियों के अपवाद के साथ। लेकिन यह देखते हुए कि यहां स्टोर में इंजेक्शन लगाया गया है, यह बिल्कुल सही तरीके से नहीं दिखता है और प्रलेखन के लिए बिल्कुल भी नहीं है।

लेकिन क्या अगर प्रोटोटाइप?

inject फ़ंक्शन inject में उपयोग किए जाने वाले प्रोटोटाइप समाधान के पीछे का विचार Nuxt से उधार लिया गया था। यह वैश्विक मिश्रण की तुलना में बहुत अधिक सही तरीका है, इसलिए मैं इस पर बस गया।

  Vue.use(() => { // ,        if (Vue.prototype.hasOwnProperty(key)) { return; } //    ,         app  Object.defineProperty(Vue.prototype, key, { get () { return this.$root.$options[key]; //  ,    this } }); }); 

परिणाम

इन जोड़तोड़ के बाद, हमें इसे एक्सेस करने का अवसर मिलता है this.$wait किसी भी घटक से this.$wait , साथ ही स्टोर में कोई भी विधि।

क्या हुआ?

परियोजना संरचना:

src
- plugins
-- index.js
-- axios.js
-- wait.js
- store
- App.vue
- main.js


index.js :

 import Vue from 'vue'; import axios from './axios'; import wait from './wait'; export default function (app) { let inject = (name, plugin) => { let key = `$${name}`; app[key] = plugin; app.store[key] = plugin; Vue.use(() => { if (Vue.prototype.hasOwnProperty(key)) { return; } Object.defineProperty(Vue.prototype, key, { get () { return this.$root.$options[key]; } }); }); }; axios(app, inject); wait(app, inject); } 

wait.js

 export default function ({store: {dispatch, getters}}, inject) { const wait = { start: action => dispatch('wait/start', action), end: action => dispatch('wait/end', action), is: action => getters['wait/waiting'](action) }; inject('wait', wait); } 

axios.js

 import axios from 'axios'; export default function (app) { axios.defaults.baseURL = process.env.API_BASE_URL; axios.defaults.headers.common['Accept'] = 'application/json'; axios.defaults.headers.post['Content-Type'] = 'application/json'; } 

main.js :

 import Vue from 'vue'; import App from './App.vue'; import store from './store'; import initPlugins from './plugins'; const app = { render: h => h(App), store }; initPlugins(app); new Vue(app).$mount('#app'); 

निष्कर्ष

जोड़तोड़ के परिणामस्वरूप हमें main.js फ़ाइल में एक आयात और एक फ़ंक्शन कॉल मिला। और अब यह तुरंत स्पष्ट हो जाता है कि प्रत्येक प्लगइन और प्रत्येक वैश्विक निर्भरता के लिए कॉन्फ़िगरेशन कहां देखना है।

एक नया प्लगइन जोड़ते समय, आपको बस एक फ़ाइल बनाने की ज़रूरत होती है जो फ़ंक्शन को निर्यात करती है, इसे index.js में आयात करती है और इस फ़ंक्शन को कॉल करती है।

मेरे व्यवहार में, इस तरह की संरचना बहुत सुविधाजनक साबित हुई है, इसके अलावा, इसे आसानी से परियोजना से परियोजना में स्थानांतरित किया जाता है। अगर आपको डिपेंडेंसी इंजेक्शन करने या किसी अन्य प्लगइन को कॉन्फ़िगर करने की आवश्यकता है तो कोई दर्द नहीं है।

टिप्पणियों में निर्भरता प्रबंधन के साथ अपने अनुभव को साझा करें। सफल प्रोजेक्ट!