Vuex - الاستخدام المفرط للألعاب في التطبيق. خطأ في التحليل

تناقش هذه المقالة خطأ شائعًا يرتكبه معظم المبتدئين عند تطوير تطبيق على Vue + Vuex. سنتحدث عن الحروف وكيفية استخدامها بشكل صحيح. ونحن ننظر أيضا في وظائف المساعد mapState و mapGetters.

قبل القراءة: من المستحسن أن يكون لديك معرفة أساسية عن Vue و Vuex.

الفصل 1. ما هي getters. مثال استخدام غير مناسب

تمثل Getters جزءًا من مستودع Vuex الذي يُرجع بيانات محسوبة عن الحالة الحالية لمستودع التخزين إلى مكوناتنا.

النظر في مثال:

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 } } } 

المثال أعلاه يعمل ، لكنه لا يستحق كل هذا العناء. مع هذا النهج ، نحن الزائد التطبيق.

إذا كنت بحاجة إلى إخراج البيانات مباشرة من التخزين إلى المكون دون أي تعديلات ، فليس getters هو الحل الأفضل. بعد ذلك ، سأوضح كيف يمكنك تحسين الرمز والتخلص من الاستخدام غير المناسب للأحرف.

الفصل 2. استخدام mapState لاسترداد البيانات من التخزين

تقرأ الوثائق :

عندما يحتاج أحد المكونات إلى استخدام العديد من الخصائص أو أدوات المستودع ، قد يكون الإعلان عن كل هذه الخصائص المحسوبة مملاً. في مثل هذه الحالات ، يمكنك استخدام وظيفة mapState ، التي تنشئ الخصائص المحسوبة تلقائيًا.

دعنا نعود إلى مكوننا واستخدام mapState بدلاً من getter:

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

يمكن حذف getter من المستودع ، لأنه نحن لسنا بحاجة إليه بعد الآن:

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

أكثر ملاءمة ، أليس كذلك؟ لقد تخلصنا من الأخطاء غير الضرورية وقللنا من حجم الشفرة.

الفصل 3. لماذا getters ، إذا كان هناك mapState

وما زالت هناك حاجة إليها. تُستخدم الحروف في الحالات التي تحتاج فيها إلى عرض المعلومات المعدلة من المستودع (على سبيل المثال ، قائمة بجميع الكتب المقروءة ).

دعنا ننشئ منشأ للحصول على جميع الكتب التي تقرأ من المستودع:

 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 } } } 

يمكن للمرء أن يتوقف عند هذا ، ولكن هناك شيء مفيد آخر يستحق المعرفة. إذا كنت بحاجة إلى إعادة استخدام نفس getter في مكونات مختلفة ، فقد لا يكون من المناسب للغاية كتابة الحروف في كل مرة بالطريقة المحسوبة. MapGetters يأتي لانقاذ .

لنلقِ نظرة على مثال:

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

التحسن واضح: باستخدام mapGetters قللنا مقدار الشفرة.

يمكنك أيضًا حساب المعلومات من المستودع استنادًا إلى بعض البيانات ، على سبيل المثال ، الحصول على كتاب بمعرفه أو اسمه. ويمكن تحقيق ذلك عن طريق تمرير حجة لدينا getter.

 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) } } } 

إبزيم المواد

• استخدم الحروف عندما تحتاج إلى عرض معلومات معدلة من المستودع (على سبيل المثال ، قائمة بجميع الكتب المقروءة) ، وفي حالات أخرى ، استخدم وظيفة مساعد mapState.
• يمكن تمريرها وسيطات إضافية لحساب البيانات استنادا إليها.
• يتم تحديث نتائج Getter عندما تتغير إحدى التبعيات.

وثائق getter باللغة الروسية

مثال التطبيق من مقال عن codepen