Vuex: बड़ी परियोजनाओं को संरचित करना और मॉड्यूल के साथ काम करना

Vuex एक आधिकारिक, अच्छी तरह से प्रलेखित एप्लीकेशन स्टेट मैनेजमेंट लाइब्रेरी है जिसे विशेष रूप से Vue.js. के लिए डिज़ाइन किया गया है। सामग्री का लेखक, जिसका अनुवाद आज हम प्रकाशित करते हैं, का मानना ​​है कि इस पुस्तकालय का उपयोग करना Redux की तुलना में अधिक सुखद है, क्योंकि, सबसे पहले, Vuex को कम बॉयलर कोड की आवश्यकता होती है, और दूसरी बात, इस तथ्य के कारण कि यह काम करता है अतुल्यकालिक तंत्रों के साथ, यहां किसी अतिरिक्त पुस्तकालय की आवश्यकता नहीं है। इसके अलावा, चूंकि Vuex लाइब्रेरी उसी टीम द्वारा बनाई गई थी जो Vue पर काम कर रही है, इसलिए यह लाइब्रेरी इस ढांचे के साथ बहुत अच्छी तरह से एकीकृत है। दुर्भाग्य से, Vuex के साथ काम करने में आप अभी भी एक कठिनाई का सामना कर सकते हैं, जिसमें परियोजनाओं की संरचना को ठीक से तैयार करना शामिल है जिसमें आप इस पुस्तकालय का उपयोग करने की योजना बनाते हैं।



इस लेख में आपको Vuex का उपयोग करके बड़ी परियोजनाओं की संरचना के लिए कार्यप्रणाली का वर्णन मिलेगा, और Vuex मॉड्यूल बनाने की प्रक्रिया को स्वचालित करने के लिए डिज़ाइन की गई स्क्रिप्ट।

Vue- उद्यम-बॉयलरप्लेट पैटर्न और परियोजना संरचना मुद्दा

Vue डेवलपर्स में से एक, क्रिस फ्रिट्ज ने, Vue के लिए एक उत्कृष्ट टेम्पलेट बनाया, जिसमें प्रस्तुत की गई परियोजना को Vuex का उपयोग करने के लिए डिज़ाइन किया गया है। विशेष रूप से, यह टेम्पलेट Vuex को modules फ़ोल्डर में फ़ाइलों के आधार पर मॉड्यूल को स्वचालित रूप से पंजीकृत करने की अनुमति देता है। प्रोजेक्ट की फ़ोल्डर संरचना कुछ निम्न आकृति जैसी दिख सकती है।


प्रोजेक्ट संरचना और असुविधाजनक कोड प्लेसमेंट

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


मॉड्यूल की सामग्री में अलग-अलग फ़ाइलों में मॉड्यूल की सामग्री के टूटने के साथ परियोजना की संरचना

एक टेम्पलेट का विकास जो एक सुविधाजनक परियोजना संरचना का समर्थन करता है

इसलिए, हम Vuex के साथ काम को व्यवस्थित करने जा रहे हैं ताकि हम अपनी परियोजनाओं में पिछले आंकड़े में दिखाए गए समान फ़ोल्डर और फ़ाइल संरचनाओं का उपयोग कर सकें। ऐसा करने के लिए, पहले Vue CLI 3 का उपयोग करके एक नया प्रोजेक्ट बनाएं।

आपके पास इसके साथ आगे के काम के लिए प्रोजेक्ट टेम्प्लेट तैयार होने के बाद, टर्मिनल में npm install vuex lodash -save कमांड चलाकर Vuex और Lodash npm install vuex lodash -save । मॉड्यूल के साथ काम करने के लिए, हमें लोदश से camelCase फ़ंक्शन की आवश्यकता है, जिसे स्ट्रिंग को ऊंट शैली में बदलने के लिए डिज़ाइन किया गया है।

अब पिछले आंकड़े में दिखाए गए के समान एक फ़ोल्डर और एक फ़ाइल संरचना बनाएं।

चलिए store.js फ़ाइल से शुरू करते हैं। यहाँ उसका कोड है:

 import Vue from 'vue' import Vuex from 'vuex' import modules from './modules' Vue.use(Vuex) const store = new Vuex.Store({ modules, strict: process.env.NODE_ENV !== 'production' }) //    `init`     for (const moduleName of Object.keys(modules)) { if (modules[moduleName].actions.init) {   store.dispatch(`${moduleName}/init`) } } export default store 

Vue और Vuex यहाँ आयात किए गए हैं, क्योंकि हम उनके बिना नहीं कर सकते। इसके अलावा, हम /modules/index.js से /modules/index.js आयात करते हैं। अगला, हम सभी मॉड्यूल के माध्यम से भंडारण और लूप को इनिशियलाइज़ करते हैं। यदि मॉड्यूल में एक init क्रिया है, तो हम मॉड्यूल को इनिशियलाइज़ करते हैं। यह उन मॉड्यूलों के लिए बहुत उपयोगी साबित होता है जिन्हें एप्लिकेशन शुरू होने पर आरंभ करने की आवश्यकता होती है। नतीजतन, निश्चित रूप से, हम store निर्यात करते store , जिसके बाद, आमतौर पर, इसे main.js फ़ाइल में आयात किया जाता है और Vue उदाहरण में जोड़ा जाता है।

अब यह index.js फ़ाइल के साथ काम करने का समय है, जो कि /store/modules फ़ोल्डर में स्थित है।

 //    Vuex     ,    . import camelCase from 'lodash/camelCase'; //    const requireModule = require.context( //      '.', //     true, //   index.js,    ,    //   'actions', 'mutations',  'getters' . //  ,      .js /^(?!.*(actions|mutations|getters|index)).*\.js$/ ); const modules = {}; requireModule.keys().forEach(fileName => { //     if (/\.unit\.js$/.test(fileName)) return; //            modules[camelCase(fileName.split('/')[1].replace(/(\.\/|\.js)/g, ''))] = {   namespaced: true,   ...requireModule(fileName).default }; }); export default modules; 

इस कोड में, हम सबसे पहले लोडश से camelCase फ़ंक्शन आयात करते हैं। तब हम मॉड्यूल्स को जोड़ने के लिए require.context विधि का उपयोग करते हैं। तीसरे पैरामीटर के रूप में, हम एक नियमित अभिव्यक्ति पास करते हैं जो index.js फ़ाइल को फ़िल्टर करेगा, साथ ही ऐसी फाइलें जिनके नाम में लाइन्स actions , mutations और getters । उन्हें स्थिति फ़ाइल में आयात किया जाएगा, उदाहरण के लिए, auth.js , और फिर निर्यात किया जाएगा। उदाहरण के लिए, यहाँ है कि किस तरह src/store/modules/auth/ auth.js src/store/modules/auth/ फोल्डर से auth.js फ़ाइल काम की शुरुआत में दिख सकती है:

 import actions from './actions'; import mutations from './mutations'; import getters from './getters'; const state = {   user: null }; export default {   state,   mutations,   getters,   actions }; 

अब यह केवल सभी मॉड्यूल के माध्यम से जाने और उन सभी के साथ एक ही वस्तु बनाने के लिए बनी हुई है। यहां आपको उन सभी फ़ाइलों को बाहर करने की आवश्यकता है जिनके नाम पर एक लाइन unit , क्योंकि उन्हें केवल परीक्षणों के लिए आवश्यक है, और विकास के लिए या उत्पादन में एक परियोजना को तैनात करने के लिए नहीं। उसके बाद, हम modules ऑब्जेक्ट में एक नई प्रॉपर्टी जोड़ते हैं, जिसमें स्टेट फाइल का नाम होगा, उदाहरण के लिए, auth या users । इसके अलावा, हम संपत्ति के नाम को सुसंगत बनाने के लिए camelCase फ़ंक्शन का उपयोग करते हैं। तब हम modules ऑब्जेक्ट को पॉप्युलेट करते हैं, आवश्यकता के माध्यम से requireModule करते हैं और उपयोग कर रहे हैं ...requireModule(fileName).default , और फिर modules निर्यात करें।

तथ्य की बात के रूप में, यह है कि कैसे एक परियोजना को संरचित किया जा सकता है जिसमें राज्य, गेटर्स, एक्शन और म्यूटेशन अलग से संग्रहीत किए जाते हैं और आसानी से व्यवस्थित होते हैं। अब बात करते हैं कि Vuex मॉड्यूल को स्वचालित रूप से बनाने के लिए स्क्रिप्ट कैसे लिखें।

स्वचालित रूप से Vuex मॉड्यूल बनाने के लिए स्क्रिप्ट

नाम फ़ोल्डर के साथ प्रोजेक्ट फ़ोल्डर में एक नया फ़ोल्डर बनाएं, इसमें फ़ाइल generateVuexModule.js बनाएं। इस परियोजना के लिए हमें Node.js की आवश्यकता होगी, इसलिए, यदि आपके पास यह प्लेटफ़ॉर्म स्थापित नहीं है, तो अब इसे ठीक करने का समय है। हमारी स्क्रिप्ट में केवल एक निर्भरता है - chalk पैकेज, जिसका उपयोग कंसोल में प्रदर्शित सामग्रियों को डिजाइन करने के लिए किया जाता है। आप इस पैकेज को npm install -save-dev chalk इंस्टॉल कर सकते हैं।

1स्टेप १

generateVuexModule.js फ़ाइल में, आपको तीन मॉड्यूल कनेक्ट करने की आवश्यकता है: fs , path और chalk । इसके अलावा यहां आपको मॉड्यूल फ़ोल्डर ( src/store/modules ) के पथ के साथ एक निरंतरता और एक अन्य निरंतर - args , जो कि स्क्रिप्ट को पास किए जाने पर तर्क पास हो जाएगा।

 const fs = require('fs'); const path = require('path'); const chalk = require('chalk'); const modulesPath = 'src/store/modules'; const args = process.argv.slice(2); const error = (...args) => { console.log(chalk.red(...args)); }; const success = (...args) => { console.log(chalk.green(...args)); }; if (!args.length) { error('You must provide a name for the module!'); return; } 

जैसा कि आप देख सकते हैं, हम पहले दो को छोड़कर सभी तरह के तर्कों को लिखते हैं, क्योंकि वे node.exe और स्क्रिप्ट फ़ाइल के लिए मार्ग का प्रतिनिधित्व करते हैं, और हमें इस जानकारी की आवश्यकता नहीं है। हम केवल तीसरे पैरामीटर में रुचि रखते हैं - नए मॉड्यूल का नाम। इसके अलावा, कुछ फ़ंक्शन, error और success , जो विभिन्न रंगों के ग्रंथों के साथ संदेश प्रदर्शित करने के लिए पूर्वोक्त chalk पैकेज का उपयोग करते हैं।

यहां आपको यह पता लगाने के लिए कि हमारी नाम लिपि में मॉड्यूल का नाम दिया गया है या नहीं, और यदि यह नहीं है, तो args ऐरे की लंबाई की जांच करें। इसलिए, यदि आप node generateVuexModule.js कमांड का उपयोग करके इस स्क्रिप्ट को चलाने का प्रयास करते हैं, तो इसके बिना कुछ और पारित किए बिना, आपको टर्मिनल में एक त्रुटि संदेश दिखाई देगा।

2स्टेप २

इस बिंदु पर, हमारे पास मॉड्यूल और मॉड्यूल द्वारा दिए गए पथ के लिए एक नाम है स्थिरांक। हालाँकि, हमें अभी भी इस डेटा के साथ काम करना है। अर्थात्, args सरणी से नाम निकालें और मॉड्यूल के लिए पूरा पथ इकट्ठा करें, न कि इसकी सामग्री के गठन का उल्लेख करने के लिए।

 const moduleName = args[0]; const modulePath = path.join(__dirname, '../', modulesPath, moduleName); if (fs.existsSync(modulePath)) { error(`${moduleName} directory already exists!`); return; } const stateContent = `import getters from './getters'; import actions from './actions'; import mutations from './mutations'; const state = {}; export default { state, getters, actions, mutations }; `; const exportFileContent = `import * as types from '@/store/types'; export default { }; `; 

मॉड्यूल नाम सूचकांक 0. के साथ args सरणी के तत्व में होगा। कार्यक्रम के इस चरण में, हम इस तत्व की उपस्थिति पर भरोसा कर सकते हैं, जैसा कि हमने पहले इसे process.argv से निकालने का प्रयास किया था, और फिर args सरणी की लंबाई की जांच की। इसके अलावा, हमने path मॉड्यूल और join विधि का उपयोग करके पूर्ण पथ तैयार किया। हमें वर्तमान निर्देशिका __dirname निर्माण का उपयोग करके __dirname , एक स्तर ऊपर ले जाया गया है, क्योंकि generateVuexModule.js फ़ाइल scripts प्रोजेक्ट फ़ोल्डर में स्थित है। फिर हम केवल परिणाम, निरंतर modulesPath की सामग्री और मॉड्यूल के नाम को modulesPath । इस बिंदु पर, modulePath स्थिरांक में pathToYourProject/project/src/store/modules/moduleName जैसा कुछ होना चाहिए। यह वह जगह है जहां मॉड्यूल बनाया जाएगा। अब, चूंकि हमारे पास पूरा रास्ता है, हम जाँच सकते हैं कि क्या यह निर्देशिका मौजूद है। हम गलती से किसी मौजूदा मॉड्यूल की फाइलों को अधिलेखित नहीं करना चाहेंगे। परिणामस्वरूप, यदि आप जिस निर्देशिका में एक नया मॉड्यूल बनाने की योजना बना रहे हैं, वह मौजूद है, हम chalk के लिए धन्यवाद, लाल अक्षरों में एक त्रुटि संदेश प्रदर्शित करेंगे।


त्रुटि संदेश उदाहरण

अगला, आपको निरंतर बनाने की आवश्यकता है जिसमें फ़ाइलों के लिए डेटा होगा। जैसा कि आप कल्पना कर सकते हैं, stateContent उपयोग स्टेट फाइल के लिए किया जाता है, उदाहरण के लिए, जैसे कि auth.js , और exportFileContent को getters.js , actions.js और mutations.js फ़ाइलों के लिए उपयोग किया जाता है। यदि आवश्यक हो, तो आप इस सूची में वह सब कुछ जोड़ सकते हैं जो आपके प्रोजेक्ट में आवश्यक है।

3स्टेप ३

अब हमें बस मॉड्यूल फ़ाइलों के लिए पथ बनाना होगा और उन्हें बनाना होगा।

 const statePath = `${path.join(modulePath, `${moduleName}.js`)}` const gettersPath = `${path.join(modulePath, 'getters.js')}` const actionsPath = `${path.join(modulePath, 'actions.js')}` const mutationsPath = `${path.join(modulePath, 'mutations.js')}` fs.mkdirSync(modulePath); fs.appendFileSync(statePath, stateContent); fs.appendFileSync(gettersPath, exportFileContent); fs.appendFileSync(actionsPath, exportFileContent); fs.appendFileSync(mutationsPath, exportFileContent); success('Module', moduleName, 'generated!'); 

पहले हम चार स्थिरांक घोषित करते हैं, जिनमें से प्रत्येक में संबंधित फ़ाइल के लिए एक पथ होता है। अगला, हमें मॉड्यूल के लिए एक फ़ोल्डर बनाने की आवश्यकता है। हमने पहले से ही जाँच कर लिया है कि क्या ऐसा कोई फ़ोल्डर मौजूद है और यदि ऐसा है तो एक त्रुटि दी। इसलिए, फ़ोल्डर बनाने में कोई समस्या नहीं होनी चाहिए। और अंत में, हम fs.appendFileSync उपयोग करते हैं, नई फ़ाइलों को नई बनाई गई निर्देशिका में बनाने की प्रक्रिया में निर्दिष्ट सामग्री के साथ रखते हैं। अंत में, स्क्रिप्ट ऑपरेशन के सफल समापन के बारे में संदेश प्रदर्शित करती है।

इस स्क्रिप्ट का उपयोग करने के लिए, बस टर्मिनल में अपनी परियोजना के scripts फ़ोल्डर में जाएं और प्रपत्र node generateVuexModule.js yourModuleName की एक कमांड node generateVuexModule.js yourModuleName । स्क्रिप्ट के सफल समापन के बाद, आपको एक मॉड्यूल बनाने के बारे में एक संदेश दिखाई देगा।

परिणाम

इस सामग्री की समीक्षा करने के बाद, आपने बड़ी परियोजनाओं को संरचित करने के लिए एक टेम्पलेट के बारे में सीखा, जहाँ आप Vuex का उपयोग करने की योजना बनाते हैं, और एक स्क्रिप्ट जो Vuex मॉड्यूल के निर्माण को सरल बनाती है। हमें उम्मीद है कि आपको यह ज्ञान उपयोगी लगेगा। परियोजना कोड, जिसके उदाहरणों की हमने जांच की, वह यहां पाया जा सकता है ।

प्रिय पाठकों! आप बड़े Vue अनुप्रयोगों की संरचना कैसे करते हैं जो Vuex का उपयोग करते हैं?