Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Vue

Vuex के साथ कॉम्प्लेक्स, बड़े-स्केल Vue.js ऐप्स कैसे बनाएं

by
Read Time:19 minsLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

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

एक जटिल एप्लीकेशन में मुख्य समस्या यह है कि स्पेगेटी कोड लिखने या साइड इफेक्ट्स को प्रोडूस किये बिना कंपोनेंट्स के बीच स्टेट का प्रबंधन कैसे करें। इस ट्यूटोरियल में आप सीखेंगे कि Vuex का उपयोग करके उस समस्या को हल कैसे करें: काम्प्लेक्स Vue.js एप्लीकेशन के निर्माण के लिए एक स्टेट मैनेजमेंट लाइब्रेरी।

Vuex क्या है?

Vuex एक स्टेट मैनेजमेंट लाइब्रेरी है जो विशेष रूप से जटिल, बड़े पैमाने पर Vue.js एप्लीकेशन के निर्माण के लिए ट्यून किया गया है। यह तत्काल अपडेट के लिए अपनी रेअक्टिविटी सिस्टम का लाभ उठाते हुए, एप्लिकेशन में सभी कंपोनेंट्स के लिए ग्लोबल, सेंट्रलाइज्ड स्टोर का उपयोग करता है।

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

आपको Vuex की आवश्यकता क्यों है?

आप पूछ सकते हैं: मुझे पहली जगह में Vuex की आवश्यकता क्यों है? क्या मैं सिर्फ शेयर्ड स्टेट को नियमित जावास्क्रिप्ट फ़ाइल में नहीं डाल सकता और इसे अपने Vue.js एप्लिकेशन में इम्पोर्ट नहीं कर सकता?

आप निश्चित रूप से कर सकते हैं, लेकिन एक प्लेन ग्लोबल ऑब्जेक्ट की तुलना में कर सकते हैं, Vuex स्टोर में कुछ महत्वपूर्ण फायदे और लाभ हैं:

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

Vuex के साथ शुरू करना

शुरू करने से पहले, मैं कई चीजों को स्पष्ट करना चाहता हूं।

सबसे पहले, इस ट्यूटोरियल का पालन करने के लिए, आपको Vue.js और उसके कंपोनेंट्स की प्रणाली, या फ्रेमवर्क के साथ कम से कम न्यूनतम अनुभव की अच्छी समझ होनी चाहिए।

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

अंत में, मैं ES2015 सिंटेक्स का उपयोग करूँगा। यदि आप इससे परिचित नहीं हैं, तो आप इसे यहां सीख सकते हैं

और अब, चलो शुरू करें!

एक Vuex प्रोजेक्ट को सेट अप करें

Vuex के साथ शुरू करने वाला पहला कदम है आपकी मशीन पर Vue.js और Vuex इंस्टॉल किया गया है। ऐसा करने के कई तरीके हैं, लेकिन हम सबसे आसान उपयोग करेंगे। बस एक HTML फ़ाइल बनाएं और आवश्यक CDN लिंक जोड़ें:

मैंने कंपोनेंट्स को अच्छे दिखने के लिए कुछ CSS का उपयोग किया, लेकिन आपको उस CSS कोड के बारे में चिंता करने की आवश्यकता नहीं है। यह केवल आपको क्या हो रहा है के बारे में एक विसुअल नोशन प्राप्त करने में मदद करता है। <head> टैग के अंदर बस कॉपी और पेस्ट करें:

अब, चलिए काम करने के लिए कुछ कॉम्पोनेन्ट बनाते हैं। <script> टैग के अंदर, बंद </body> टैग के ठीक ऊपर, निम्नलिखित Vue  कोड डालें:

यहां, हमारे पास एक vue इंस्टेंस, एक पैरेंट कॉम्पोनेन्ट, और दो चाइल्ड कॉम्पोनेन्ट हैं। प्रत्येक कॉम्पोनेन्ट का हैडिंग "Score:" होता है जहां हम ऐप स्टेट आउटपुट करेंगे।

आखरी चीज जो आपको करने की जरूरत है वह है एक रैपिंग <div> id = "app" के साथ <body> को खोलने के एकदम बाद, और उसके बाद पैरेंट कॉम्पोनेन्ट को अंदर रखें:

तैयारी का काम अब कर लिया गया है, और हम आगे बढ़ने के लिए तैयार हैं।

Vuex को एक्स्प्लोर करना

स्टेट मैनेजमेंट

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

किसी भी Vuex स्टोर के लिए स्टेट और म्युटेशन आधार हैं:

  • state एक ऐसा ऑब्जेक्ट है जो एप्लिकेशन डेटा की स्थिति रखता है।
  • mutations भी एक ऑब्जेक्ट है जिसमें स्टेट को प्रभावित करने वाले मेथड्स होते हैं।

गेटर्स और एक्शन्स स्टेट और म्युटेशन के लॉजिकल प्रोजेक्शन की तरह हैं:

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

आइए चीजों को थोड़ा स्पष्ट बनाने के लिए निम्न डायग्राम का पता लगाएं:

Vuex State Management Workflow DiagramVuex State Management Workflow DiagramVuex State Management Workflow Diagram

बाईं तरफ, हमारे पास एक Vuex स्टोर का एक उदाहरण है, जिसे हम बाद में इस ट्यूटोरियल में बनाएंगे। दाहिने तरफ, हमारे पास एक Vuex वर्कफ़्लो डायग्राम है, जो दिखाता है कि कैसे विभिन्न Vuex एलिमेंट एक साथ काम करते हैं और एक-दूसरे के साथ कम्यूनिकेट करते हैं।

स्टेट को बदलने के लिए, एक विशेष Vue कॉम्पोनेन्ट को म्युटेशन करना चाहिए (उदा. this.$store.commit('increment', 3)), और फिर, वे म्युटेशन स्टेट को बदलते हैं (score 3 हो जाता है)। इसके बाद, गेटर स्वचालित रूप से अपडेट होते हैं vue  की रिएक्टिव प्रणाली के लिए धन्यवाद, और वे कॉम्पोनेन्ट के व्यू में अपडेट प्रस्तुत करते हैं (इसके साथ this.$store.getters.score)।

म्युटेशन असिंक्रोनॉयस कोड एक्सेक्यूट नहीं कर सकते हैं, क्योंकि इससे Vue DevTools जैसे डीबग टूल्स में बदलावों को रिकॉर्ड करना और ट्रैक करना असंभव हो जाएगा। असिंक्रोनॉयस लॉजिक का उपयोग करने के लिए, आपको इसे एक्शन्स में रखना होगा। इस मामले में, एक कॉम्पोनेन्ट पहले एक्शन्स को डिस्पैच करेगा (this.$store.dispatch('incrementScore', 3000)) जहां असिंक्रोनॉयस कोड एक्सेक्यूट किया जाता है, और फिर वे एक्शन्स म्युटेशन करेंगे, जो स्टेट को बदल देंगे।

एक Vuex स्टोर स्केलेटन बनाएँ

अब हमने यह पता लगाया है कि कैसे Vuex काम करता है, चलिए अपने Vuex स्टोर के लिए स्केलेटन बनाते हैं। ChildB कॉम्पोनेन्ट रजिस्ट्रेशन के ऊपर निम्नलिखित कोड डालें:

प्रत्येक कॉम्पोनेन्ट से Vuex स्टोर तक ग्लोबल पहुंच प्रदान करने के लिए, हमें vue  इंस्टेंस में store प्रॉपर्टी जोड़ने की आवश्यकता है:

अब, हम हर कॉम्पोनेन्ट से this.$store वेरिएबल से स्टोर को एक्सेस कर सकते हैं।

अब तक, यदि आप ब्राउज़र में CodePen के साथ प्रोजेक्ट खोलते हैं, तो आपको निम्न परिणाम देखना चाहिए।

App SkeletonApp SkeletonApp Skeleton

स्टेट प्रॉपर्टीज

स्टेट ऑब्जेक्ट में आपके एप्लीकेशन में सभी शेयर्ड डेटा शामिल हैं। बेशक, यदि आवश्यक हो, तो प्रत्येक कॉम्पोनेन्ट का अपना प्राइवेट स्टेट भी हो सकता है।

कल्पना करें कि आप एक गेम एप्लिकेशन बनाना चाहते हैं, और आपको गेम के स्कोर को स्टोर करने के लिए एक वेरिएबल की आवश्यकता है। तो आप इसे स्टेट ऑब्जेक्ट में डाल देते हैं:

अब, आप सीधे स्टेट के स्कोर तक पहुंच सकते हैं। आइए कंपोनेंट्स पर वापस जाएं और स्टोर से डेटा का पुन: उपयोग करें। स्टोर के स्टेट से रिएक्टिव डेटा का पुन: उपयोग करने में सक्षम होने के लिए, आपको कंप्यूटेड प्रॉपर्टीज का उपयोग करना चाहिए। तो चलिए पैरेंट कॉम्पोनेन्ट में score() कंप्यूटेड की गई प्रॉपर्टी बनाएं:

पैरेंट कॉम्पोनेन्ट के टेम्पलेट में, {{score}} एक्सप्रेशन डालें:

और अब, दो चाइल्ड कंपोनेंट्स के लिए भी ऐसा ही करें।

Vuex इतना स्मार्ट है कि जब भी स्टेट बदलता है तो score को सक्रिय रूप से अपडेट करने के लिए यह हमारे लिए सभी काम करेगा। स्कोर की वैल्यू को बदलने का प्रयास करें और देखें कि परिणाम तीनों कंपोनेंट्स में कैसे अपडेट होते हैं।

गेटर्स बनाना

यह निश्चित रूप से अच्छा है कि आप this.$store.state कीवर्ड को कॉम्पोनेन्ट के अंदर रीयूज़ कर सकते है, जैसा आपने ऊपर देखा। लेकिन निम्नलिखित सिनेरियो की कल्पना करें:

  1. लार्ज स्केल एप्लिकेशन में, जहां मल्टीप्ल कंपोनेंट्स this.$store.state.score का उपयोग करके स्टोर के स्टेट तक पहुंचते हैं, आप score का नाम बदलने का फैसला करते हैं। इसका मतलब यह है कि आपको प्रत्येक कॉम्पोनेन्ट के अंदर वेरिएबल का नाम बदलना होगा जो इसका उपयोग करता है!
  2. आप state के एक कंप्यूटेड वैल्यू का उपयोग करना चाहते हैं। उदाहरण के लिए, मान लें कि स्कोर 100 पॉइंट तक पहुंचने पर आप खिलाड़ियों को 10 पॉइंट का बोनस देना चाहते हैं। इसलिए, जब स्कोर 100 पॉइंट हिट करता है, तो 10 पॉइंट बोनस जोड़े जाते हैं। इसका अर्थ यह है कि प्रत्येक कॉम्पोनेन्ट में एक ऐसा फ़ंक्शन होता है जो स्कोर का पुन: उपयोग करता है और इसे 10 तक बढ़ा देता है। आप प्रत्येक कॉम्पोनेन्ट में कोड दोहराएंगे, जो बिल्कुल अच्छा नहीं है!

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

आइए score() गेटर बनाएं:

एक गेटर को state अपने पहले आर्गुमेंट के रूप में प्राप्त होता है, और उसके बाद स्टेट की प्रॉपर्टीज तक पहुंचने के लिए इसका उपयोग करता है।

नोट: getters को दूसरा आर्गुमेंट के रूप में गेटर्स भी मिलते हैं। आप स्टोर में अन्य गेटर्स तक पहुंचने के लिए इसका इस्तेमाल कर सकते हैं।

सभी कंपोनेंट्स में, score() कंप्यूटेड की गई प्रॉपर्टी को सीधे स्टेट के स्कोर के बजाय score() गेटर का उपयोग करने के लिए मॉडिफाई करें।

अब, यदि आप score को result में बदलने का निर्णय लेते हैं, तो आपको इसे केवल एक ही स्थान पर अपडेट करना होगा: score() गेटर में। इस CodePen में इसे आज़माएं!

म्युटेशन बनाना

म्युटेशन स्टेट को बदलने का एकमात्र स्वीकार्य तरीका है। परिवर्तनों को ट्रिगर करने का मतलब कॉम्पोनेन्ट मेथड्स में म्युटेशन करना है।

एक म्युटेशन एक इवेंट हैंडलर फ़ंक्शन है जो नाम से परिभाषित किया गया है। म्युटेशन हैंडलर फ़ंक्शन एक state को पहले आर्गुमेंट के रूप में प्राप्त करते हैं। आप एक अतिरिक्त दूसरा आर्गुमेंट भी पारित कर सकते हैं, जिसे म्युटेशन के लिए payload को कॉल किया जाता है।

आइए एक increment() म्युटेशन बनाएं:

म्युटेशन सीधे कॉल नहीं किया जा सकता है! म्युटेशन करने के लिए, आपको commit() मेथड को संबंधित म्युटेशन और संभावित अतिरिक्त पैरामीटर के नाम से कॉल करना चाहिए। यह हमारे मामले में step की तरह सिर्फ एक हो सकता है, या किसी ऑब्जेक्ट में लिपटे कई हो सकते हैं।

चलो changeScore() नामक मेथड बनाकर दो चाइल्ड कंपोनेंट्स में increment() म्युटेशन का उपयोग करें:

हम this.$store.state.score बदलने के बजाय एक म्युटेशन को कमिटकर रहे हैं, क्योंकि हम म्युटेशन द्वारा किए गए परिवर्तन को स्पष्ट रूप से ट्रैक करना चाहते हैं। इस तरह, हम अपने एप्लीकेशन लॉजिक को अधिक पारदर्शी, पता लगाने योग्य और तर्क के लिए आसान बनाते हैं। इसके अलावा, यह टूल को इम्प्लीमेंट करना संभव बनाता है, जैसे vue  DevTools या Vuetron, जो सभी म्युटेशन लॉग कर सकते हैं, स्टेट स्नैपशॉट ले सकते हैं, और टाइम-ट्रेवल डीबगिंग कर सकते हैं।

अब, चलो changeScore() मेथड को उपयोग में डाल दें। दो चाइल्ड कंपोनेंट्स के प्रत्येक टेम्पलेट में, एक बटन बनाएं और इसमें एक ईवेंट लिस्टनेर जोड़ें:

जब आप बटन पर क्लिक करेंगे, तो state को 3 बढ़ाया जाएगा, और यह परिवर्तन सभी कंपोनेंट्स में दिखाई देगा। अब हमने प्रभावी रूप से प्रत्यक्ष क्रॉस-कॉम्पोनेन्ट कम्युनिकेशन प्राप्त किया है, जो Vue.js बिल्ट-इन "props down, events up" मैकेनिज्म के साथ संभव नहीं है। हमारे CodePen उदाहरण में इसे देखें।

एक्शन्स बनाना

एक एक्शन केवल एक फंक्शन है जो एक म्युटेशन करता है। यह अप्रत्यक्ष रूप से स्टेट को बदलता है, जो असिंक्रोनॉयस ऑपरेशंस के एक्सेक्यूट की अनुमति देता है।

चलो एक incrementScore() एक्शन बनाएँ:

एक्शन्स context को पहले पैरामीटर के रूप में प्राप्त करता हैं, जिसमें स्टोर से सभी मेथड्स और प्रॉपर्टीज शामिल होते हैं। आम तौर पर, हम बस ES2015 आर्गुमेंट डेस्ट्रक्टरिंग का उपयोग करके हमें आवश्यक भागों को निकालें। commit मेथड वह है जो हमें अक्सर चाहिए। एक्शन्स को म्युटेशन की तरह, दूसरा payload आर्गुमेंट भी मिलता है।

ChildB कॉम्पोनेन्ट में, changeScore() मेथड को मॉडिफाई करें:

एक एक्शन को कॉल करने के लिए, हम dispatch() मेथड को इसी एक्शन के नाम और अतिरिक्त पैरामीटर के साथ ही म्युटेशन के साथ उपयोग करते हैं।

अब, ChildA कॉम्पोनेन्ट से Change Score बटन स्कोर को 3 बढ़ाएगा। ChildB कॉम्पोनेन्ट से उसी के सामान बटन वही करेगा, लेकिन 3 सेकंड की देरी के बाद। पहले मामले में, हम सिंक्रोनस कोड एक्सेक्यूट कर रहे हैं और हम एक म्युटेशन का उपयोग करते हैं, लेकिन दूसरे मामले में हम असिंक्रोनॉयस कोड एक्सेक्यूट कर रहे हैं, और हमें इसके बजाय एक एक्शन का उपयोग करने की आवश्यकता है। देखें कि यह हमारे CodePen उदाहरण में कैसे काम करता है।

Vuex मैपिंग हेल्पर्स

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

इस तरह की score() कम्प्यूटेड प्रॉपर्टी लिखने के बजाय:

हम सिर्फ mapState() हेल्पर का उपयोग करते है इस तरह से:

और score() प्रॉपर्टी स्वचालित रूप से हमारे लिए बन जाती है।

गेटर्स, म्युटेशन, और एक्शन्स के लिए भी यही सच है।

score() गेटर बनाने के लिए, हम mapGetters() हेल्पर का उपयोग करते हैं:

changeScore() मेथड बनाने के लिए, हम mapMutations() हेल्पर का उपयोग करते हैं कुछ इस तरह से:

जब payload आर्गुमेंट के साथ म्युटेशन और एक्शन्स के लिए उपयोग किया जाता है, तो हमें उस आर्गुमेंट को टेम्पलेट में पास करना होगा जहां हम ईवेंट हैंडलर को परिभाषित करते हैं:

अगर हम एक म्युटेशन की बजाय एक्शन का उपयोग करने के लिए changeScore() को बदलना चाहते हैं, तो हम इस तरह mapActions() का उपयोग करते हैं:

फिर, हमें ईवेंट हैंडलर में डिले को परिभाषित करना होगा:

नोट: सभी मैपिंग हेल्पर्स एक ऑब्जेक्ट रीटर्न करते हैं। इसलिए, यदि हम उन्हें अन्य लोकल कंप्यूटेड प्रॉपर्टीज या मेथड्स के साथ कॉम्बिनेशन में उपयोग करना चाहते हैं, तो हमें उन्हें एक ऑब्जेक्ट में मर्ज करने की आवश्यकता है। सौभाग्य से, ऑब्जेक्ट स्प्रेड ऑपरेटर (...) के साथ, हम इसे किसी भी यूटिलिटी के बिना कर सकते हैं।

हमारे CodePen में, आप एक उदाहरण देख सकते हैं कि अभ्यास में सभी मैपिंग हेल्पर्स कैसे उपयोग किए जाते हैं।

स्टोर को अधिक मॉड्यूलर बनाना

ऐसा लगता है कि जटिलता के साथ समस्या लगातार हमारे रास्ते को बाधित करती है। हमने इसे Vuex स्टोर बनाकर हल किया, जहां हमने स्टेट मैनेजमेंट और कॉम्पोनेन्ट कम्युनिकेशन को आसान बना दिया। उस दुकान में, हमारे पास एक ही स्थान पर सबकुछ है, आसानी से मैनिपुलेट करना और इसके बारे में रीज़न होना।

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

Vuex मॉड्यूल का उपयोग करना

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

आइए इसे एक्शन में देखें:

उपर्युक्त उदाहरण में, हमने दो मॉड्यूल बनाए, प्रत्येक चाइल्ड के कॉम्पोनेन्ट के लिए एक। मॉड्यूल केवल सादे ऑब्जेक्ट्स हैं, जिन्हें हम scoreBoard और resultBoard के रूप में modules ऑब्जेक्ट जो की स्टोर के अंदर है में रजिस्टर करते हैं। childA के लिए कोड पिछले उदाहरणों में स्टोर जैसा ही है। childB के कोड में, हम वैल्यूज और नेम्स में कुछ बदलाव जोड़ते हैं।

आइए resultBoard मॉड्यूल में परिवर्तनों को रिफ्लेक्ट करने के लिए अब ChildB कॉम्पोनेन्ट को ट्विक करें।

ChildA कॉम्पोनेन्ट में, केवल एक चीज जिसे हमें संशोधित करने की आवश्यकता है वह changeScore() मेथड है:

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

Namespaced Modules

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

एक Vuex मॉड्यूल नेमस्पेस करने के लिए, आप बस namespaced प्रॉपर्टी को true पर सेट करें।

उपर्युक्त उदाहरण में, हमने प्रॉपर्टी और मेथड को दो मॉड्यूल के लिए समान नाम दिया है। और अब हम मॉड्यूल के नाम से प्रीफ़िक्स्ड एक प्रॉपर्टी या मेथड का उपयोग कर सकते हैं। उदाहरण के लिए, यदि हम resultBoard मॉड्यूल से score() गेटर का उपयोग करना चाहते हैं, तो हम इसे इस तरह टाइप करते हैं: resultBoard/score। अगर हम scoreBoard मॉड्यूल से score() गेटर चाहते हैं, तो हम इसे इस तरह टाइप करते हैं: scoreBoard/score

आइए अब हमारे कंपोनेंट्स को हमारे द्वारा किए गए परिवर्तनों को दर्शाने के लिए संशोधित करें।

जैसा कि आप हमारे CodePen उदाहरण में देख सकते हैं, अब हम जिस मेथड या प्रॉपर्टी को चाहते हैं उसका उपयोग कर सकते हैं और परिणाम प्राप्त कर सकते हैं।

अलग अलग फ़ाइलों में Vuex स्टोर को विभाजित करना

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

तो अगला लॉजिकल कदम Vuex स्टोर को अलग-अलग फ़ाइलों में विभाजित करना है। विचार यह है कि स्टोर के लिए एक व्यक्तिगत फ़ाइल और बाकी मॉड्यूल समेत हर ऑब्जेक्ट के लिए अपनी फाइल का होना। इसका मतलब स्टेट, गेटर्स, म्युटेशन, एक्शन्स और प्रत्येक व्यक्तिगत मॉड्यूल (store.js, state.js, getters.js, आदि) के लिए अलग-अलग फाइलें हैं, आप अगले सेक्शन के अंत में इस स्ट्रक्चर का एक उदाहरण देख सकते हैं।

Vue सिंगल फ़ाइल कॉम्पोनेन्ट का उपयोग करना

हमने Vuex स्टोर को मॉड्यूलर के रूप में बनाया है जैसा हम कर सकते हैं। अगली बात हम कर सकते हैं वही स्ट्रेटेजी Vue.js कंपोनेंट्स पर भी लागू करना है। हम प्रत्येक कॉम्पोनेन्ट को एक.vue एक्सटेंशन के साथ एक सिंगल, सेल्फ-कॉन्टैन फ़ाइल में डाल सकते हैं। यह कैसे काम करता है यह जानने के लिए, आप Vue सिंगल फ़ाइल कॉम्पोनेन्ट डॉक्यूमेंटेशन पेज पर जा सकते हैं।

तो, हमारे मामले में, हमारे पास तीन फाइलें होंगी: Parent.vue, ChildA.vue, और ChildB.vue

अंत में, अगर हम सभी तीन तकनीकों को जोड़ते हैं, तो हम निम्नलिखित या इसी के समान स्ट्रक्चर के साथ अपना काम समाप्त करेंगे:

हमारे ट्यूटोरियल GitHub रेपो में, आप ऊपर दिए गए स्ट्रक्चर के साथ पूर्ण प्रोजेक्ट को देख सकते हैं।

संक्षिप्त

आइए कुछ मुख्य बिंदुओं को दोबारा याद करें जिन्हें आपको Vuex के बारे में याद रखने की आवश्यकता है:

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

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

असिंक्रोनॉयस लॉजिक एक्शन्स में एनकेप्सुलेटेड किया जाना चाहिए। प्रत्येक एक्शन एक या अधिक म्युटेशन कर सकते है, और एक म्युटेशन एक से अधिक एक्शन्स द्वारा किया जा सकता है। एक्शन्स जटिल हो सकते हैं, लेकिन वे सीधे स्टेट को कभी नहीं बदलते हैं।

अंत में, रखरखाव की कुंजी मॉड्यूलरिटी है। जटिलता से निपटने और हमारे कोड मॉड्यूलर बनाने के लिए, हम "divide and conquer" सिद्धांत और कोड विभाजन तकनीक का उपयोग करते हैं।

निष्कर्ष

बस! आप पहले से ही Vuex के पीछे मुख्य कॉन्सेप्ट्स को जानते हैं, और आप अभ्यास में उन्हें लागू करने के लिए तैयार हैं।

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.