تعلم Vuex في 5 دقائق

سيعطيك هذا البرنامج التعليمي فهمًا أساسيًا لـ Vuex من خلال إنشاء تطبيق لوضع الخطة. يمكن للمستخدم كتابة الأنشطة ثم التصويت على مدى إعجابهم / عدم إعجابهم بها.

بمجرد قراءة هذا البرنامج التعليمي ، يمكنك الاطلاع على دورة Vuex المجانية على Scrimba ، إذا كنت مهتمًا بمعرفة المزيد.

ما هو Vuex؟ من وثائق Vue الرسمية

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. 

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

وانشاء

في Scrimba ، الإعدادات المعقدة شيء لا نفعله.

في هذا البرنامج التعليمي ، قمنا بإنشاء ملف HTML بسيط حيث يمكن كتابة كل شيء. لا تتردد في كتابة CSS الخاصة بك أو نسخها فقط من هذا الملعب

يتم استيراد مكتبات Vue و Vuex عبر CDN باستخدام العلامات:

         Activity Voter                      /*         ADD CSS HERE       */ /*       ADD VUE CODE HERE     */     

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

خطة التطبيق

سنقوم ببناء تطبيق تصويت ، يعمل جيدًا بشكل خاص عندما تكون في مجموعة من الأصدقاء لا تعرف ماذا تفعل وعليك التفكير في جميع الخيارات.

ستتألف الوظيفة من قدرة المستخدم على كتابة نشاط ، ومن ثم سيكون لكل نشاط زر تصويت لأعلى ولأسفل لحساب الإجماليات.

ابدء

أولاً ، دعنا نسخر بسرعة من تطبيقنا بتنسيق HTML. سنستخدم هذا التخطيط لاستخراجه في مكون منفصل وسنضيف وظائف للتخطيط ليصبح واقعًا.

Activity voter

          Add Activity    
       
  •       Go Snowboarding ?         ?         5         ?          
  •  

أضف متجر Vuex ببعض البيانات الأساسية

يبدأ Vuex بالمتجر. المتجر هو المكان الذي نحتفظ فيه (نخزن) دولتنا.

   Vue.use(Vuex);   const store = new Vuex.Store({   });   new Vue({     el: "#app",     store   });  

دعنا نضيف أيضًا بعض البيانات المشفرة إلى المتجر ، والتي ستتضمن نشاطًا واحدًا ومجموعة بها رمز تعبيري واحد لإظهار مشاعرنا تجاه النشاط.

   Vue.use(Vuex);   const store = new Vuex.Store({     state: {       activities: [{ name: "go snowboarding", rating: 5 }],       emojis: ["?"]     }   });   new Vue({     el: "#app",     store   });  

للسماح لحالتنا بالتغير بشكل تفاعلي ، يمكننا استخدام Vuex mapStateللتعامل مع خصائص الحالة المحسوبة لنا.

  new Vue({     el: "#app",     store,     computed: Vuex.mapState(["activities", "emojis"])   }); 

أضف المكون

الآن لدينا أنشطة داخل دولتنا. لنقدم مكونًا منفصلاً لكل من هذه الأنشطة. كل واحد سوف تحتاج activityو emojisالدعائم.

Vue.component("activity-item", {   props: ["activity", "emojis"],   template: `     
  •       {{ activity.name }}         {{ emojis[0] }}         ?         {{activity.rating}}         ?          
  •     ` });

    في الداخل ، appيمكننا الآن استخدام المكون الذي أنشأناه حديثًا مع جميع الارتباطات المناسبة لـ activityemojis. كتذكير سريع ، إذا أردنا التكرار فوق مصفوفة وعرض مكون لكل عنصر في المصفوفة ، في Vue ، يمكننا استخدام v-forالربط.

    Activity voter

              Add Activity    
         

    أضف الطفرات إلى المتجر

    إذا أردنا تحديث المتجر في Vuex ، فيمكننا استخدام الطفرات. في الوقت الحالي console.log، سنكتفي بحدوث طفرة وسنقوم بتنفيذها بعد ذلك.

    const store = new Vuex.Store({   state: {     activities: [       { name: "go snowboarding", rating: 5 },     ],     emojis: ["?"]   },   mutations: {     increment(state, activityName) {       console.log('increment');     },     decrement(state, activityName) {       console.log('decrement');     },   } }); 

    كيف نطلق طفرة؟ نسمي commitدالة $storeباسم الطفرات التي نريد تنفيذها. يتم التعامل مع أي حجج بعد اسم الطفرة كحجج لطفرة ملتزمة.

    new Vue({   el: "#app",   store,   data() {     return {       activityName: ""     };   },   computed: Vuex.mapState(["activities", "emojis"]),   methods: {     increment(activityName) {       this.$store.commit("increment", activityName);     },     decrement(activityName) {       this.$store.commit("decrement", activityName);     }   } }); 

    إضافة وظائف للمكون

    Each activity-item has voting buttons that need to increment and decrement on click of a button. We can pass these functions as props. Let's now bind our methods to props.

    Let's also not forget to provide activity.name as an argument to both.

    Vue.component("activity-item", {   props: ["activity", "emojis", "increment", "decrement"],   template: `     
  •       {{ activity.name }}           {{ emojis[0] }}           ?           {{activity.rating}}           ?          
  •     ` });

    And there we go! The flow is working. We can see the console.log statement in the console.

    Implement counter

    Let's implement the counter. First, we need to find an activity by its name, and then update its rating.

      mutations: {     increment(state, activityName) {       state.activities         .filter(activity => activity.name === `${activityName}`)         .map(activity => activity.rating++);     },     decrement(state, activityName) {       state.activities         .filter(activity => activity.name === `${activityName}`)         .map(activity => activity.rating--);     }   } 

    Perfect, we can now vote on activities.

    Use form input to add activity

    But of course, we need to be able to add activities too.

    Let's create a mutation to the store, that would add an activity to the list of existing activities, with a name that we will later get from the input and a default rating of 0.

     mutations: {     ...     addActivity(state, name) {       state.activities.push({ name, rating: 0 });     }   } 

    Inside methods, we can commit a new activity to the store.

    methods: {     ...     addActivity(activityName) {       this.$store.commit("addActivity", activityName);     }   } 

    Implement form submission

    Let's wire up the submit function to our HTML form.

          Add Activity  

    We can now add our submit function to methods. Inside, we're going to use our existing addActivity method and in the end, reset activityName in the input field to an empty string.

    methods: {     ...     onSubmit(e) {       e.preventDefault();       this.addActivity(this.activityName);       this.activityName = "";     }   } 

    We call e.preventDefault() to avoid the form from reloading on each addition of a new activity.

    All the counters now work and the field gets updated. It does look a bit strange, that we have only one emotion for all the activities, no matter what their rating is.

    Let's rewrite emojis into an object with some description of what moods they are meant to reflect and clean up existing state, so we start from no activities.

    state: {     activities: [],     emojis: { yay: "?", nice: "?", meh: "?", argh: "?", hateIt: "?"} }, ... 

    And as a finishing touch, we can display different emojis depending on the rating an activity has.

    Vue.component("activity-item", {   props: ["activity", "emojis", "increment", "decrement"],   template: `     
  •       {{ activity.name }}             ` });
  • نبدأ بتطبيق فارغ ، وهذا ما أردناه.

    والآن إذا أضفنا النشاطين اللذين اعتدناهما في التطبيق ، فقم بالتصويت على التصنيفات التي لدينا رموز تعبيرية تعكس شعورنا تجاه الأنشطة!

    يمكنك التحقق من الكود الكامل هنا.