يوفر Vuex أدوات ملائمة للعمل مع البيانات ، لكن بعض المطورين لا يستخدمونها دائمًا للغرض المقصود منه ، أو ينشئون إنشاءات زائدة عن الحاجة حيث كان من الممكن الكتابة بشكل أكثر وضوحًا وإيجازًا ، يحدث هذا أيضًا عندما يتعرف المطور على هذه الأدوات فقط. ستوفر هذه المقالة بعض الإرشادات لتنظيم الرسائل التي يمكنك تطبيقها على عملك.
تعد Getters جزءًا من مستودع Vuex ، والخصائص المحسوبة ، بشكل أكثر تحديدًا. إنها تسمح لك بتلقي ، على سبيل المثال ، البيانات التي تمت تصفيتها بواسطة بعض المعلمات. لكن بعض المطورين يأخذون اسم هذه الأداة حرفيًا ويبدأون في استخدامها كبديل للحصول على البيانات مباشرةً من الولاية . من هنا يتبع الخطأ الأول في استخدام getters.
استخدام getters لاسترداد البيانات بسهولة من التخزين
دعونا نلقي نظرة على مثال رمز بسيط:
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 وخلق القيم المحسوبة التي ترجع دولة. لإنشاء رمز موحد ، استخدم mapState وبقية الأدوات حتى بالنسبة لقيمة واحدة ، لأن الرمز الخاص بك سيصبح أكثر تجانسًا ويمكنك إجراء تغييرات بشكل أسرع وأكثر ملاءمة ، على سبيل المثال ، إذا كان عليك عرض قيمة أخرى.
إنشاء getter لمرشح حالة استخدام واحد
لنفترض أنك تحتاج إلى الحصول على فيلم James Bond ، في حالة معينة ، قد ترغب في القيام بذلك:
getters: { bondFilm: state => state.films .find(f => f.name === ' ') || {}, },
لا حاجة للقيام بذلك ، فمن الأفضل أن تتحول إلى mapState مرة أخرى وتفعل ما يلي:
computed: { ...mapState({ bondFilm: state => state.films .find(f => f.name === ' ') || {}, }), },
في الواقع ، يمكنك ببساطة نقل عامل تصفية معين إلى المكون الخاص بك حيث تكون هناك حاجة لذلك ، والمثال هو مجردة للغاية ، لكنني في كثير من الأحيان التقيت به في الممارسة العملية.
إنشاء getters مع المعلمات
تعتبر طريقة التعامل مع getters مريحة وشائعة للغاية ، لكن يجب ألا ننسى أن هذه getters هي خصائص محسوبة ومخزنة مؤقتًا. هذا لا يعني أنه لا يمكنك استخدامها على الإطلاق ، ولكن من الأفضل التفكير مرة أخرى فيما إذا كان يمكن أن يكون الأمر خلاف ذلك. ألقِ نظرة على مثال:
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; }, },
في هذه الحالة ، سيحدث إعادة الحساب فقط في حالة حدوث تغييرات في البيانات ، ويمكنك الرجوع إلى المعرّف كمفاتيح للكائن.
لتلخيص
- لا تستخدم الحروف لاسترجاع البيانات البسيطة ، فلا داعٍ لتعقيد الكود الخاص بك باستخدام الأغلفة لعمليات بسيطة
- لا تنشئ حروفًا لعوامل التصفية المحددة التي ستكون مطلوبة مرة واحدة فقط ، فالفكرة الرئيسية لهذه الحروف هي الحصول على حالات مشتقة ، لكنك لست بحاجة إلى نقل منطق المكون إلى منطق التخزين
- تفقد الأحرف المعلّمة ممتلكاتها الرئيسية - إمكانية التخزين المؤقت ، فكّر عدة مرات قبل استخدامها بهذه الطريقة
- استفد بالكامل من mapState ، تذكر أنه يمكن تنفيذ معظم المهام المحددة لأحد المكونات باستخدامه
- استخدم mapGetters ، وقد قيل هذا بشكل غير مباشر ، ولكن التوحيد أفضل من عدم وجوده
هذه المقالة مكتوبة للمطورين المبتدئين والخلط ، إذا لم تفتح بعد وثائق Vue و Vuex ، وأول شيء ذهبت إليه للنظر في المعلومات حول المشكلة على المحور ، ثم اتبع الروابط أعلاه وبدء القراءة منها ، استخدم نصائح من مصادر مختلفة بعد ذلك.