"Vue.js एक्शन" पुस्तक

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

कट के तहत Vuex अध्याय के रूप में एक मार्ग है, वर्णन करते हुए: क्या स्थिति है; गेटर्स का उपयोग; म्यूटेशन का कार्यान्वयन; क्रियाओं को जोड़ना; Vuex सहायक विधियों के साथ काम करना; मॉड्यूल और परियोजना सेटअप।

10.1। हमें Vuex की आवश्यकता क्यों है

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

यदि आपके पास पहले से सिंगल-पेज एप्लिकेशन बनाने के लिए अन्य रूपरेखाओं के साथ काम करने का अनुभव है, तो इनमें से कुछ अवधारणाएं परिचित हो सकती हैं। उदाहरण के लिए, रिएक्ट एक समान राज्य प्रबंधन प्रणाली का उपयोग करता है जिसे Redux कहा जाता है। Vuex और Redux फ्लक्स परियोजना से प्रभावित हैं। यह फेसबुक द्वारा प्रस्तावित वास्तुकला है, जिसे क्लाइंट वेब एप्लिकेशन के निर्माण को सरल बनाने के लिए डिज़ाइन किया गया है। यह एक दिशा में डेटा की गति में योगदान देता है: क्रियाओं से डिस्पैचर तक, फिर भंडारण और दृश्य के अंत में। यह दृष्टिकोण आपको शेष एप्लिकेशन से राज्य को अलग करने की अनुमति देता है और तुल्यकालिक अपडेट को प्रोत्साहित करता है। आप फ़्लक्स के बारे में आधिकारिक प्रलेखन facebook.imtqy.com/flux/docs/overview.html पर अधिक जान सकते हैं।

Vuex एक ही सिद्धांत पर काम करता है, राज्य को अनुमानित और समकालिक रूप से बदलने में मदद करता है। डेवलपर्स को समकालिक और अतुल्यकालिक कार्यों के साथ राज्य को अपडेट करने के परिणामों के बारे में चिंता करने की आवश्यकता नहीं है। कल्पना करें कि हम एक सर्वर एपीआई के साथ बातचीत कर रहे हैं जो JSON प्रारूप में डेटा लौटाता है। यदि इस डेटा को तीसरे पक्ष के पुस्तकालय द्वारा संशोधित किया जाता है तो क्या होता है? हम अप्रत्याशित परिणाम नहीं चाहते हैं। Vuex किसी भी अतुल्यकालिक परिवर्तनों को समाप्त करके ऐसी स्थितियों से बचने में मदद करता है।
आप शायद सोच रहे हैं कि हमें क्यों Vuex लाइब्रेरी की आवश्यकता है। अंत में, Vue.js आपको घटकों को जानकारी पास करने देता है। जैसा कि आप पिछले अध्यायों से जानते हैं, इसके लिए इनपुट पैरामीटर और उपयोगकर्ता की घटनाओं का इरादा है। हम डेटा ट्रांसफर और अंतर-घटक संचार के लिए अपनी घटना बस भी बना सकते हैं। इस तरह के तंत्र का एक उदाहरण अंजीर में प्रस्तुत किया गया है। 10.1।

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

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

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



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

10.2। राज्य और उत्परिवर्तन Vuex में

Vuex संपूर्ण अनुप्रयोग की स्थिति को एक ही ऑब्जेक्ट में संग्रहीत करता है, जिसे सत्य का एकल स्रोत भी कहा जाता है। जैसा कि नाम से पता चलता है, सभी डेटा एक ही स्थान पर एकत्र किए गए हैं और कोड के अन्य भागों में डुप्लिकेट नहीं हैं।

संकेत

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

Vuex में राज्य के साथ काम करने के एक सरल उदाहरण पर विचार करें। हमारा सारा कोड एक फाइल में रखा जाएगा। बाद में आप सीखेंगे कि Vue-CLI का उपयोग करके Vuex को किसी प्रोजेक्ट में कैसे जोड़ा जाए। एक टेक्स्ट एडिटर खोलें और vuex-state.html फ़ाइल बनाएँ। हम केंद्रीय रिपॉजिटरी और काउंटर में स्थित एक संदेश प्रदर्शित करेंगे। परिणाम अंजीर में दिखाया गया है। 10.3।

सबसे पहले, Vue और Vuex के लिंक के साथ स्क्रिप्ट टैग जोड़ें। फिर HTML मार्कअप बनाएं। हम टैग H1, H2, H3 और बटन का उपयोग करेंगे। H1 टैग हेडर को Vue.js. उदाहरण में घोषित स्थानीय चर के साथ प्रदर्शित करता है। वेलकम रिपॉजिटरी पर आधारित गणना गुणों के रूप में स्वागत और काउंटर संदेशों को निष्पादित किया जाता है।

बटन तत्व वृद्धि की क्रिया को ट्रिगर करता है। 10.1 कोड से कोड को vuex-state.html फ़ाइल में कॉपी करें।


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

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

उत्परिवर्तन वस्तु के अंदर एक वृद्धि समारोह बनाएँ जो राज्य को बढ़ाता है। कोड १०.२ में कोड लें और इसे vuex-state.html फ़ाइल के नीचे चिपकाएँ।


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

एक नए डेटा फ़ंक्शन के साथ Vue.js का एक उदाहरण बनाएं जो Vuex ऐप के पाठ के साथ एक स्थानीय हेडर संपत्ति लौटाएगा। गणना किए गए अनुभाग में, गणना किए गए गुणों का स्वागत और काउंटर जोड़ें। पहला store.state.msg, और दूसरा - store.state.count लौटाएगा।

अंत में, आपको वेतन वृद्धि नामक एक विधि जोड़ने की आवश्यकता है। Vuex रिपॉजिटरी में एक म्यूटेशन घोषित किया गया है, लेकिन हम इसे सीधे स्टेट को अपडेट करने के लिए उपयोग नहीं कर सकते हैं। इसके लिए एक विशेष प्रतिबद्ध कार्य प्रदान किया जाता है। यह Vuex को रिपॉजिटरी को अपडेट करने के लिए कहता है और इस प्रकार परिवर्तनों को बचाता है। अभिव्यक्ति स्टोर डॉट कॉम ('वेतन वृद्धि') म्यूटेशन करता है। लिस्टिंग 10.2 में बनाए गए कोड के तुरंत बाद निम्नलिखित स्निपेट (लिस्टिंग 10.3) डालें।


यह Vuex पर आधारित एक पूर्ण-कार्यशील अनुप्रयोग है! बटन दबाने की कोशिश करें - हर बार जब आप प्रेस करते हैं तो काउंटर को 1 से बढ़ाना चाहिए।

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

Vuex-state.html की सामग्री को नई vuex-state-pass.html फ़ाइल में कॉपी करें। एक उदाहरण के रूप में इस एप्लिकेशन का उपयोग करते हुए, हम दिखाते हैं कि कैसे तर्क पारित किए जाते हैं।

जैसा कि आप लिस्टिंग 10.4 में देख सकते हैं, केवल म्यूटेशन ऑब्जेक्ट और इंक्रीमेंट विधि को अपडेट करने की आवश्यकता है। म्यूटेशन वेतन वृद्धि को एक अन्य तर्क में जोड़ें जिसे पेलोड कहा जाता है। यह वह मान है जिसके द्वारा State.count बढ़ेगा। Increment method के अंदर store.commit पर कॉल करें और 10 को दूसरे तर्क के रूप में निर्दिष्ट करें। नीचे दिखाए अनुसार vuex-state.html फ़ाइल को अपडेट करें।


Vuex-state-pass.html फ़ाइल को सहेजें और ब्राउज़र में खोलें। अब, जब बटन दबाया जाता है, तो काउंटर को 10 से बढ़ाना चाहिए, न कि 1 से। यदि कुछ गलत हो गया है, तो ब्राउज़र कंसोल की जांच करें और सुनिश्चित करें कि कोई टाइपोस नहीं हैं।

10.3। गेटर्स एंड एक्ट्स

पिछले उदाहरण में, हमने गणना की गई संपत्तियों से सीधे स्टोर तक पहुंच बनाई। लेकिन क्या होगा अगर हमारे पास कई घटक हैं जिन्हें समान पहुंच की आवश्यकता है? मान लीजिए कि हम बड़े अक्षरों में स्वागत संदेश प्रदर्शित करना चाहते हैं। इस मामले में, गेटर्स हमारी मदद करेंगे।

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

Vuex-State-pass.html फ़ाइल की सामग्री को vuex-state-getter-action.html पर कॉपी करें। कार्य को सरल बनाने के लिए, HTML कोड को अपरिवर्तित छोड़ दें। अंत में, आपको अंजीर के समान कुछ मिलना चाहिए। 10.4।

जैसा कि आप देख सकते हैं, हैलो वर्ल्ड संदेश अब शब्दों में प्रदर्शित किया गया है। प्रेस मी बटन दबाने से काउंटर को उसी तरह से बढ़ाया जाता है जैसे पिछले उदाहरण में।

Vuex.Store निर्माण को नए Vuex-state-getter-action.html फ़ाइल के अंदर टैग के ठीक नीचे स्थित करें गेटर्स नामक उत्परिवर्तन के बाद एक नई वस्तु जोड़ें। इस ऑब्जेक्ट के अंदर Msg और काउंट मेथड बनाएँ, जैसा कि लिस्टिंग 10.5 में दिखाया गया है। दोनों विधियां एक ही राज्य के तर्क को स्वीकार करती हैं।

संदेश प्राप्त करने वाला राज्य state.msg.toUppercase () लौटेगा। इसके लिए धन्यवाद, संदेश हमेशा अपरकेस में प्रदर्शित होता है। गेट गेट्टर में, हम State.count लौटाएंगे। म्यूटेशन के नीचे गेटर्स जोड़ने के बाद, vuex-state-getter-action.html फ़ाइल को इस तरह दिखना चाहिए।


क्रियाएँ Vuex का एक और अभिन्न अंग हैं। मैंने पहले उल्लेख किया है कि उत्परिवर्तन समकालिक होना चाहिए। लेकिन क्या होगा अगर हम अतुल्यकालिक कोड के साथ काम करते हैं? राज्य बदलने के लिए अतुल्यकालिक कॉल कैसे करें? Vuex क्रियाओं से हमें इसमें मदद मिलेगी।
कल्पना करें कि एप्लिकेशन सर्वर तक पहुंच रहा है और प्रतिक्रिया की प्रतीक्षा कर रहा है। यह एक अतुल्यकालिक कार्रवाई का एक उदाहरण है। दुर्भाग्य से, उत्परिवर्तन अतुल्यकालिक हैं, इसलिए हम यहां उनका उपयोग नहीं कर सकते हैं। इसके बजाय, Vuex कार्रवाई के आधार पर एक अतुल्यकालिक ऑपरेशन जोड़ें।

एक देरी बनाने के लिए, सेटटाइमआउट फ़ंक्शन का उपयोग करें। Vuex-state-getter-action.html फ़ाइल खोलें और गेट्स के तुरंत बाद इसमें एक्शन ऑब्जेक्ट जोड़ें। इस ऑब्जेक्ट के अंदर, वृद्धि की कार्रवाई रखें, जो संदर्भ और पेलोड तर्कों को लेता है। संदर्भ का उपयोग करके, हम परिवर्तनों को बचाएंगे। SetTimeout के अंदर reference.commit ऑपरेशन रखें। इस तरह हम सर्वर पर देरी का अनुकरण करते हैं। हम भी कर सकते हैं पेलोड तर्क को reference.com.com, जो तब म्यूटेशन में जाता है। लिस्टिंग 10.6 पर आधारित कोड को अपडेट करें।

Vuex.Store को अपडेट करने के बाद, आप Vue.js. के मूल उदाहरण के लिए आगे बढ़ सकते हैं गणना की गई संपत्ति पहले की तरह सीधे स्टोर तक नहीं पहुंच पाएगी, लेकिन गेटर्स का उपयोग करके। हम वेतन वृद्धि विधि को भी संशोधित कर रहे हैं। हमारे द्वारा पहले बनाई गई नई Vuex संपत्ति का उपयोग करने के लिए, यह कॉल store.dispatch ('वेतन वृद्धि', 10) का उपयोग करेगा।


प्रेषण कॉल के लिए पहला तर्क कार्रवाई का नाम है, और दूसरे तर्क में हमेशा अतिरिक्त डेटा होता है जो इस कार्रवाई को पारित किया जाता है।

परिषद

अतिरिक्त डेटा एक नियमित चर या एक वस्तु भी हो सकता है।
Vue.js इंस्टेंस को vuex-state-getter-action.html फ़ाइल में अद्यतन करें जैसा कि लिस्टिंग 10.7 में दिखाया गया है।

एप्लिकेशन डाउनलोड करें और बटन को कई बार दबाएं। आपको देरी पर ध्यान देना चाहिए, लेकिन प्रत्येक प्रेस के बाद काउंटर में 10 की वृद्धि होगी।

10.4। Vue-CLI का उपयोग करके एक पालतू जानवरों की दुकान परियोजना में Vuex का उपयोग करना

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

हम माल पर डेटा को गोदाम में स्थानांतरित करते हैं। जैसा कि आप पिछले अध्यायों से याद करते हैं, डेटा मुख्य घटक के अंदर बनाए गए हुक में आरंभीकृत किया गया था। अब इस हुक को एक नई घटना उत्पन्न करनी चाहिए जो Vuex रिपॉजिटरी को आरंभ करती है। हम गणना किए गए संपत्ति उत्पादों को भी जोड़ देंगे, जो कि गटर का उपयोग करके उत्पादों को पुनः प्राप्त करते हैं (हम इसे बाद में बनाएंगे)। अंतिम परिणाम अंजीर में दिखेगा। 10.5।

10.4.1। Vue-CLI के साथ Vuex स्थापित करें

सबसे पहले, Vuex स्थापित करें! यह एक सरल प्रक्रिया है। पालतू जानवरों की दुकान के नवीनतम संस्करण को तैयार करें जिसे हमने अध्याय 8 में काम किया था। आप इस अध्याय के लिए GitHub पर github.com/ErikCH/VuejsInActionCode पर सभी कोड डाउनलोड कर सकते हैं।

एक टर्मिनल विंडो खोलें और प्रोजेक्ट की रूट डायरेक्टरी पर जाएं। Vuex का नवीनतम संस्करण स्थापित करने के लिए, निम्नलिखित कमांड चलाएँ:

$ npm install vuex 

और पालतू जानवरों की दुकान के पैकेज फ़ाइल में इसके बारे में रिकॉर्ड सहेजें।

अब आपको स्टोरेज को main.js फाइल में जोड़ना होगा, जो src फोल्डर में स्थित है। रिपॉजिटरी स्वयं अभी तक मौजूद नहीं है, लेकिन हम इसे वैसे भी आयात करते हैं। आमतौर पर यह src / store / store.js फ़ाइल में होता है, लेकिन आप एक अलग रास्ता चुन सकते हैं - सभी डेवलपर्स की अपनी प्राथमिकताएँ होती हैं। आइए हम आम तौर पर स्वीकृत विकल्प पर ध्यान केन्द्रित करें। बाद में इस अध्याय में हम मॉड्यूल का उपयोग करके एक वैकल्पिक निर्देशिका संरचना पर चर्चा करेंगे।

आपको राउटर के नीचे Vue.js के मूल उदाहरण में संग्रहण जोड़ने की आवश्यकता है, जैसा कि सूची 10.8 में दिखाया गया है। वैसे, हम ईएस 6 मानक का उपयोग करते हैं, इसलिए स्टोर: स्टोर को स्टोर करने के लिए छोटा किया जा सकता है।


स्टोरेज को रूट इंस्टेंस से कनेक्ट करने के बाद, हम इसे एप्लिकेशन के किसी भी हिस्से से एक्सेस कर सकते हैं। Src / store / store.js फ़ाइल बनाएँ। इसमें हम Vuex रिपॉजिटरी को पालतू जानवरों के स्टोर द्वारा पेश किए गए उत्पादों के बारे में जानकारी देंगे। शीर्ष पर, दो आयात विवरण जोड़ें, एक Vue और Vuex के लिए। फिर सब कुछ एक साथ रखने के लिए Vue.use (Vuex) निर्दिष्ट करें।

हमने ./store/store से main.js फ़ाइल में रिपॉजिटरी आयात की है। अब आपको store.js के अंदर स्टोर ऑब्जेक्ट को एक्सपोर्ट करने की आवश्यकता है। जैसा कि आप लिस्टिंग 10.9 में देख सकते हैं, हम Vuex.Store के बराबर एक कास्ट स्टोर मूल्य निर्यात करते हैं।

सबसे पहले, राज्य और उत्परिवर्तन के साथ वस्तुओं को जोड़ें। राज्य में उत्पाद नामक एक खाली वस्तु होगी। जल्द ही हम इसे initStore मेथड से भर देंगे। म्यूटेशन को SET_STORE कहा जाता है, यह हस्तांतरित सामान को राज्य को भेज देगा। निम्नलिखित सूची से कोड को src / store / store.js फ़ाइल में पेस्ट करें जिसे हमने अभी बनाया है।


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

मैंने पहले उल्लेख किया है कि उत्परिवर्तन समकालिक होना चाहिए और केवल Vuex के अंदर होने वाली क्रियाएं अतुल्यकालिक कोड को स्वीकार कर सकती हैं। इस सीमा के आसपास पाने के लिए, Vuex क्रिया में Axios कोड डालें।

Store.js फ़ाइल में एक एक्शन ऑब्जेक्ट बनाएँ और इसमें initStore विधि जोड़ें। इस विधि में घटकों / Main.vue फ़ाइल से बनाई गई हुक की सामग्री की प्रतिलिपि बनाएँ। उत्पाद ऑब्जेक्ट पर response.data.products असाइन करने के बजाय, हम कमिट फ़ंक्शन का उपयोग करके म्यूटेशन लागू करते हैं। SET_STORE के तर्क के रूप में response.data.products पास करें। परिणामी कोड इस तरह दिखना चाहिए (लिस्टिंग 10.10)।


हम लगभग पूरी हो चुकी हैं, हमें सिर्फ Main.vue फाइल को अपडेट करना है और स्थानीय उत्पादों के ऑब्जेक्ट से Vuex रिपॉजिटरी में माल ट्रांसफर करना है। Src / Components / Main.vue फ़ाइल खोलें और डेटा फ़ंक्शन ढूंढें। लाइन उत्पादों को निकालें: {}। हम गणना की गई संपत्ति से सामान तक पहुंचेंगे, जो कि स्टोर रिटर्न करता है।

गणना की गई संपत्तियों का पता लगाएं। CartememCount और SortedProducts Main.vue के अंदर, वे तरीकों के अनुभाग के ठीक बाद जाना चाहिए। उत्पादों की संपत्ति जोड़ें और इसे उसी नाम का गेट्टर वापस करें।

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


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


इतना काफी होना चाहिए। टर्मिनल में एनपीएम रन देव कमांड चलाएं, और स्क्रीन पर पालतू स्टोर एप्लिकेशन के साथ एक विंडो दिखाई देनी चाहिए। सामान को टोकरी में रखने की कोशिश करें और सुनिश्चित करें कि सब कुछ उसी तरह से काम करता है जैसा उसे करना चाहिए। अगर कुछ गलत हुआ है, तो कंसोल में त्रुटियों को देखें। Vuex.store के बजाय src / store / store.js फ़ाइल में, आप गलती से Vuex.Sstore टाइप कर सकते हैं। यह याद रखना!

10.5। हेल्पर मेथड्स वेक्स

Vuex सुविधाजनक सहायक तरीके प्रदान करता है जो कोड को अधिक संक्षिप्त बनाते हैं और समान गेटर्स, सेटर, म्यूटेशन और क्रियाओं को जोड़ने से छुटकारा पाते हैं। Vuex सहायक विधियों की पूरी सूची के लिए, आधिकारिक गाइड vuex.vuejs.org/guide/core-concepts.html पर देखें। आइए देखें कि वे कैसे काम करते हैं।

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

Src / Components / Main.vue फ़ाइल खोलें और स्क्रिप्ट टैग ढूंढें। इस टैग के अंदर कहीं, हैडर घटक आयात किया जाना चाहिए। इस आयात के तुरंत बाद मैपगेटर्स कनेक्ट करें, जैसा कि लिस्टिंग 10.13 में दिखाया गया है।


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

मैपगेटर्स एक अनोखी वस्तु है, इसके उचित संचालन के लिए ईएस 6 से प्रसार ऑपरेटर का उपयोग करना आवश्यक है - यह उस स्थिति में अभिव्यक्ति का विस्तार करता है जब किसी भी तर्क की उम्मीद की जाती है (शून्य या अधिक)। आप इस वाक्यविन्यास के बारे में MDN प्रलेखन में डेवलपर .mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_syntax पर अधिक पढ़ सकते हैं।

मैपगेटर्स यह सुनिश्चित करेंगे कि सभी गेटर्स को कम्प्यूटेड गुणों के रूप में जोड़ा जाता है। यह प्रत्येक गेटर के लिए एक अलग गणना संपत्ति लिखने की तुलना में बहुत सरल और अधिक सुरुचिपूर्ण तरीका है। सभी गेटर्स को मैपगेटर्स एरे में सूचीबद्ध किया गया है। इस सहायक विधि को Main.vue फ़ाइल (सूचीकरण 10.14) में जोड़ें।


Npm रन देव कमांड चलाने के बाद, पालतू स्टोर पहले की तरह काम करना चाहिए। मैपगेटर्स हेल्पर विधि अब तक बहुत उपयोगी नहीं दिखती है, लेकिन जितना अधिक हम जोड़ते हैं, उतना अधिक समय बचाएगा।

तीन और सहायक तरीके हैं जिनसे आपको अवगत होना चाहिए: mapState, mapMutations और mapActions। वे सभी एक समान तरीके से काम करते हैं, बॉयलरप्लेट कोड की मात्रा को कम करना जो आपको मैन्युअल रूप से लिखना है।

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


अब कल्पना करें कि आपको एक घटक में कई म्यूटेशन का उपयोग करने की आवश्यकता है। इस प्रक्रिया को सरल बनाने के लिए, मैपमैटेशन हेल्पर विधि (सूचीकरण 10.16) का उपयोग करें, जैसा कि मैपस्टेट और मैपगेटर्स के साथ किया जाता है। अगला mut1 इस। B1 () को $ store.commit ('mut1') से बांधता है।


अंत में, mapActions सहायक विधि पर विचार करें। यह आपको आवेदन में Vuex क्रियाओं को जोड़ने की अनुमति देता है, जिससे प्रत्येक मामले में प्रेषण कॉल के साथ तरीके बनाने की आवश्यकता समाप्त हो जाती है। पिछले उदाहरण पर लौटते हुए, कल्पना करें कि एप्लिकेशन में कुछ अतुल्यकालिक संचालन शामिल हैं। चूंकि उत्परिवर्तन के उपयोग को बाहर रखा गया है, हमें कार्रवाई का सहारा लेना चाहिए। उन्हें Vuex में बनाने के बाद, आपको घटक के ऑब्जेक्ट ऑब्जेक्ट में उन्हें एक्सेस करने की आवश्यकता है। इस समस्या को mapActions का उपयोग करके हल किया जा सकता है। act1 यह b.act1 () को। $ store.dispatch ('act1') से बाँध देगा, जैसा कि सूची 10.17 में दिखाया गया है।


अंत में, mapActions सहायक विधि पर विचार करें। यह आपको आवेदन में Vuex क्रियाओं को जोड़ने की अनुमति देता है, जिससे प्रत्येक मामले में प्रेषण कॉल के साथ तरीके बनाने की आवश्यकता समाप्त हो जाती है। पिछले उदाहरण पर लौटते हुए, कल्पना करें कि एप्लिकेशन में कुछ अतुल्यकालिक संचालन शामिल हैं। चूंकि उत्परिवर्तन के उपयोग को बाहर रखा गया है, हमें कार्रवाई का सहारा लेना चाहिए। उन्हें Vuex में बनाने के बाद, आपको घटक के ऑब्जेक्ट ऑब्जेक्ट में उन्हें एक्सेस करने की आवश्यकता है। इस समस्या को mapActions का उपयोग करके हल किया जा सकता है। act1 यह b.act1 () को। $ store.dispatch ('act1') से बाँध देगा, जैसा कि सूची 10.17 में दिखाया गया है।


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

10.6। मॉड्यूल का संक्षिप्त परिचय

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

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

Products.js के अंदर, आपको चार ऑब्जेक्ट बनाने की आवश्यकता है: राज्य, गेटर्स, एक्शन और म्यूटेशन। उनमें से प्रत्येक की सामग्री को store.js फ़ाइल से कॉपी किया जाना चाहिए।

Src / store / store.js फ़ाइल खोलें और उससे कोड कॉपी करना शुरू करें। जब किया जाता है, तो products.js फ़ाइल को इस तरह दिखना चाहिए (लिस्टिंग 10.18)।

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

Store.js फ़ाइल को अद्यतन किया जाना चाहिए। इसमें एक मॉड्यूल ऑब्जेक्ट जोड़ें, जिसके अंदर आप सभी नए मॉड्यूल सूचीबद्ध कर सकते हैं। मॉड्यूल / उत्पाद फ़ाइल को आयात करना याद रखें जो हमने पहले बनाया था।


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


मॉड्यूल आयात करके, हमने रीफैक्टरिंग प्रक्रिया पूरी की। पृष्ठ को ताज़ा करने के बाद, एप्लिकेशन को पहले की तरह ही काम करना चाहिए।

Vuex में नाम स्थान

कुछ बड़ी परियोजनाओं में, मॉडर्लाइज़ेशन कुछ समस्याओं का कारण बन सकता है। जैसे ही नए मॉड्यूल जोड़े जाते हैं, कार्यों, गेटर्स, म्यूटेशन और राज्य गुणों के नाम के साथ टकराव हो सकता है। उदाहरण के लिए, आप गलती से अलग-अलग फ़ाइलों में दो गेटर्स को एक ही नाम दे सकते हैं। और, चूंकि सब कुछ Vuex में एक वैश्विक वैश्विक नाम स्थान पर है, इसलिए कंसोल में एक डुप्लिकेट कुंजी त्रुटि होगी।
इस समस्या से बचने के लिए, प्रत्येक मॉड्यूल को अलग नाम स्थान पर रखें। ऐसा करने के लिए, बस नाम निर्दिष्ट करें: Vuex.store के शीर्ष पर सही। इस सुविधा के बारे में और अधिक जानकारी के लिए आधिकारिक Vuex प्रलेखन vuex.vuejs.org/en/guide/modules.html पर पढ़ें।

»पुस्तक की अधिक जानकारी प्रकाशक की वेबसाइट पर पाई जा सकती है
» सामग्री
» अंश

फेरीवालों के लिए कूपन पर 25% की छूट - Vue.js

पुस्तक के पेपर संस्करण के भुगतान पर, पुस्तक का एक इलेक्ट्रॉनिक संस्करण ई-मेल द्वारा भेजा जाता है।