Lær Vuex på 5 minutter

Denne vejledning giver dig en grundlæggende forståelse af Vuex ved at oprette en planlægningsapplikation. En bruger kan skrive aktiviteter og derefter stemme, hvor meget de kan lide / ikke kan lide dem.

Når du har læst denne vejledning, kan du tjekke vores gratis Vuex-kursus på Scrimba, hvis du er interesseret i at lære mere.

Hvad er Vuex? Fra Vue's officielle dokumentation

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. 

Dette kursus forudsætter, at du er noget fortrolig med Vue, og vi vil kort berøre funktioner som propskomponenter og bindinger, men vil ikke gennemgå dem i detaljer. Hvis du gerne vil have en hurtig primer på Vue, er du velkommen til at tjekke dette kursus på Scrimba.

Opsætningen

Hos Scrimba er komplicerede opsætninger noget, vi bare ikke gør.

Til denne vejledning har vi oprettet en simpel HTML-fil, hvor alt kan skrives. Du er velkommen til at skrive din egen CSS eller bare kopiere den fra denne legeplads

Vue- og Vuex-biblioteker importeres via CDN ved hjælp af tags:

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

Alternativt kan du også eksperimentere med koden i denne Vue Scrimba legeplads. Bare husk at linke legepladsen til din egen konto igen.

App-plan

Vi skal opbygge en stemmeapp, der fungerer især godt, når du er i en gruppe venner, der ikke ved hvad du skal gøre, og du skal overveje alle mulighederne.

Funktionaliteten vil bestå af, at en bruger kan skrive en aktivitet, og derefter vil hver aktivitet have en stemme op og ned-knap for at tælle totalerne.

Kom godt i gang

Lad os først narre vores app i HTML. Vi bruger dette layout til derefter at udtrække i en separat komponent, og vi vil tilføje funktionalitet, så layoutet kommer til liv.

Activity voter

          Add Activity    
       
  •       Go Snowboarding ?         ?         5         ?          
  •  

Tilføj Vuex-butik med nogle grundlæggende data

Vuex starter med butikken. Butikken er, hvor vi opbevarer (opbevarer) vores tilstand.

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

Lad os også tilføje nogle hårdkodede data til butikken, der inkluderer en aktivitet og en matrix med en emoji for at vise vores følelser over for aktiviteten.

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

For at lade vores tilstand ændre sig reaktivt kan vi bruge Vuex mapStatetil at håndtere egenskaber for beregnet tilstand for os.

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

Tilføj komponent

Nu har vi aktiviteter i vores stat. Lad os gengive en separat komponent for hver af disse aktiviteter. Hver enkelt har brug for activityog emojisrekvisitter.

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

    Inde appkan vi nu bruge vores nyoprettede komponent med alle de relevante bindinger til activityog emojis. Som en hurtig påmindelse, hvis vi ønsker at løkke over en matrix og vise en komponent for hvert element i en matrix i Vue, kan vi bruge v-forbinding.

    Activity voter

              Add Activity    
         

    Tilføj mutationer for at gemme

    Hvis vi vil opdatere butikken i Vuex, kan vi bruge mutationer. I øjeblikket vil vi netop, console.logat der skete en mutation, og vi vil implementere den bagefter.

    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');     },   } }); 

    Hvordan udløser vi en mutation? Vi kalder en commitfunktion på $storemed navnet på de mutationer, vi vil udføre. Eventuelle argumenter efter navnet på en mutation behandles som argumenter for en begået mutation.

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

    Tilføj funktionalitet til komponent

    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 }}             ` });
  • Vi starter med en tom app, som vi ønskede.

    Og hvis vi nu tilføjer de to aktiviteter, vi plejede at have i appen, skal du stemme på de vurderinger, vi har emojis, der afspejler, hvordan vi har det med aktiviteterne!

    Du kan tjekke den fulde kode her.