Vuex में गेटर्स के साथ काम करने के लिए कुछ सरल लेकिन उपयोगी टिप्स

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

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

भंडारण से डेटा को आसानी से प्राप्त करने के लिए गेटर्स का उपयोग करना

आइए एक साधारण कोड उदाहरण देखें:

state: { films: [ { id: 1, name: ' ' }, { id: 2, name: ' ' }, { id: 3, name: ' 60' }, ], }, getters: { films: state => state.films, }, 

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

 computed: { films() { return this.$store.state.films; }, }, 

या mapState का उपयोग करके और भी अधिक सुविधाजनक विकल्प:

 computed: { ...mapState(['films']), }, 

डेटा प्राप्त करने के ऐसे तरीके को अपनाएं, फिर आप अपने कोड को ज़रूरत से ज़्यादा कोड के साथ अधिभारित नहीं करेंगे।

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

एक सिंगल केस केस फिल्टर के लिए एक गेट्टर बनाएं

मान लें कि आपको जेम्स बॉन्ड फिल्म प्राप्त करने की आवश्यकता है, कुछ विशिष्ट मामले के लिए, आप ऐसा करना चाह सकते हैं:

 getters: { bondFilm: state => state.films .find(f => f.name === ' ') || {}, }, 

ऐसा करने की आवश्यकता नहीं है, यह बेहतर है कि फिर से मैपस्टैट की ओर रुख करें और इस प्रकार करें

 computed: { ...mapState({ bondFilm: state => state.films .find(f => f.name === ' ') || {}, }), }, 

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

मापदंडों के साथ गेटर्स बनाएं

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

 getters: { filmById: state => id => state.films .find(film => film.id === id) || {}, }, 

तथ्य यह है कि इस तरह के एक कॉल के साथ, आप कहते हैं कि आपको हर बार गटर के परिणाम की गणना करने की आवश्यकता होती है, और फिर इसे आपको दे देते हैं। यदि इस संरचना को इकट्ठा करने की आवश्यकता है, तो आप ऐसा कुछ कर सकते हैं:

 getters: { filmsById: (state) => { const result = {}; state.films.forEach((film) => { result[film.id] = film; }); return result; }, }, 

इस मामले में, पुनर्गणना केवल डेटा परिवर्तन के मामले में होगी, और आप आईडी को ऑब्जेक्ट की कुंजी के रूप में संदर्भित कर सकते हैं।

संक्षेप में देना

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

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