Vuex - आवेदन में गेटर्स का अत्यधिक उपयोग। पार्स करने में त्रुटि

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

पढ़ने से पहले: यह अनुशंसा की जाती है कि आपको Vue और Vuex का मूल ज्ञान है।

अध्याय 1. गेटर्स क्या हैं। अनुचित उपयोग उदाहरण

गेट्स वेक्स रिपॉजिटरी का हिस्सा हैं जो हमारे घटकों के रिपॉजिटरी की वर्तमान स्थिति के बारे में गणना किए गए डेटा को लौटाता है।

एक उदाहरण पर विचार करें:

const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] }, getters: { //     books: state => state.books } }); 

यह सभी पुस्तकों की सूची के साथ एक घटक की तरह दिखेगा:

 export default { computed: { //   books() { return this.$store.getters.books } } } 

उपरोक्त उदाहरण काम करता है, लेकिन यह इसके लायक नहीं है। इस दृष्टिकोण के साथ, हम एप्लिकेशन को अधिभारित करते हैं।

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

अध्याय 2. भंडारण से डेटा पुनः प्राप्त करने के लिए mapState का उपयोग करना

दस्तावेज़ पढ़ता है:

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

आइए अपने घटक पर वापस जाएं और एक गेट्टर के बजाय मैपस्टैट का उपयोग करें:

 import { mapState } from 'vuex'; export default { computed: { ...mapState([ 'books' ]) } } 

रिपॉजिटरी से एक गेटटर को हटाया जा सकता है, क्योंकि हमें अब उसकी आवश्यकता नहीं है:

 const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] } }); 

बहुत अधिक सुविधाजनक, है ना? हमने अनावश्यक गेटर्स से छुटकारा पा लिया और कोड की मात्रा कम कर दी।

अध्याय 3. क्यों गेटर्स, अगर कोई मैपस्टैट है

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

आइए, भंडार से पढ़ी जाने वाली सभी पुस्तकों को प्राप्त करने के लिए एक गटर बनाएँ

 const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] }, getters: { //     finishedBooks: state => { return state.books.filter(books => books.finished); } } }); 

अब हमारा घटक इस तरह दिखेगा:

 import { mapState } from 'vuex'; export default { computed: { //     ...mapState([ 'books' ]), //     finishedBooks() { return this.$store.getters.finishedBooks } } } 

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

आइए एक उदाहरण देखें:

 //     import { mapState, mapGetters } from 'vuex'; export default { computed: { //     ...mapState([ 'books' ]), //   ,   //       ...mapGetters([ 'finishedBooks' ]) } } 

सुधार स्पष्ट है: मैपगेटर्स का उपयोग करके हमने कोड की मात्रा कम कर दी है।

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

 const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] }, getters: { //     finishedBooks: state => { return state.books.filter(books => books.finished); }, //    id getBookById: (state) => (id) => { return state.books.find(books => books.id === id) } } }); 

 import { mapState, mapGetters } from 'vuex'; export default { computed: { ...mapState([ 'books' ]), ...mapGetters([ 'finishedBooks', 'getBookById' ]), getBook() { //    id === this.id return this.getBookById(this.id) } } } 

सामग्री बन्धन

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

रूसी में गेट्टर प्रलेखन

कोडपेन पर एक लेख से उदाहरण आवेदन