Μάθετε το 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   });  

Ας προσθέσουμε επίσης ορισμένα δεδομένα με κωδικοποίηση στο κατάστημα, τα οποία θα περιλαμβάνουν μια δραστηριότητα και έναν πίνακα με ένα emoji για να δείξουμε τα συναισθήματά μας απέναντι στη δραστηριότητα.

   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μπορούμε τώρα να χρησιμοποιήσουμε το νέο μας συστατικό με όλες τις κατάλληλες συνδέσεις για activityκαι emoji. Ως γρήγορη υπενθύμιση, εάν θέλουμε να βρούμε έναν πίνακα και να εμφανίσουμε ένα στοιχείο για κάθε στοιχείο σε έναν πίνακα, στο 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 }}             ` });
  • Ξεκινάμε με μια κενή εφαρμογή, κάτι που θέλαμε.

    Και τώρα αν προσθέσουμε ξανά τις δύο δραστηριότητες που κάναμε στην εφαρμογή, ψηφίστε τις βαθμολογίες που έχουμε emoji που αντικατοπτρίζουν το πώς νιώθουμε για τις δραστηριότητες!

    Μπορείτε να δείτε τον πλήρη κωδικό εδώ.