Lerne Vuex in 5 Minuten

Dieses Tutorial vermittelt Ihnen ein grundlegendes Verständnis von Vuex, indem Sie eine Planungsanwendung erstellen. Ein Benutzer kann Aktivitäten eingeben und dann abstimmen, wie sehr er sie mag / nicht mag.

Sobald Sie dieses Tutorial gelesen haben, können Sie unseren kostenlosen Vuex-Kurs über Scrimba lesen, wenn Sie mehr erfahren möchten.

Was ist Vuex? Aus der offiziellen Dokumentation von 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. 

In diesem Kurs wird davon ausgegangen, dass Sie mit Vue einigermaßen vertraut sind. Wir werden kurz auf Funktionen wie propsKomponenten und Bindungen eingehen, diese jedoch nicht ausführlich behandeln. Wenn Sie eine kurze Einführung in Vue wünschen, können Sie diesen Kurs auf Scrimba lesen.

Die Einrichtung

Komplizierte Setups machen wir bei Scrimba einfach nicht.

Für dieses Tutorial haben wir eine einfache HTML-Datei erstellt, in die alles geschrieben werden kann. Fühlen Sie sich frei, Ihr eigenes CSS zu schreiben oder es einfach von diesem Spielplatz zu kopieren

Vue- und Vuex-Bibliotheken werden über CDN mithilfe von Tags importiert :

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

Alternativ können Sie auch mit dem Code auf diesem Vue Scrimba-Spielplatz experimentieren. Denken Sie daran, den Spielplatz erneut mit Ihrem eigenen Konto zu verknüpfen.

App-Plan

Wir werden eine Abstimmungs-App erstellen, die besonders gut funktioniert, wenn Sie in einer Gruppe von Freunden sind, die nicht wissen, was zu tun ist, und alle Optionen berücksichtigen müssen.

Die Funktionalität besteht darin, dass ein Benutzer eine Aktivität eingeben kann, und dann hat jede Aktivität eine Schaltfläche zum Auf- und Abstimmen, um die Gesamtsummen hochzuzählen.

Beginnen

Lassen Sie uns zunächst unsere App schnell in HTML verspotten. Wir werden dieses Layout verwenden, um es dann in eine separate Komponente zu extrahieren, und wir werden Funktionen hinzufügen, damit das Layout zum Leben erweckt wird.

Activity voter

          Add Activity    
       
  •       Go Snowboarding ?         ?         5         ?          
  •  

Fügen Sie den Vuex-Speicher mit einigen Basisdaten hinzu

Vuex beginnt mit dem Geschäft. In dem Geschäft behalten wir unseren Zustand.

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

Fügen wir dem Geschäft auch einige fest codierte Daten hinzu, die eine Aktivität und ein Array mit einem Emoji enthalten, um unsere Gefühle für die Aktivität anzuzeigen.

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

Damit sich unser Status reaktiv ändern kann, können wir Vuex verwenden mapState, um berechnete Statuseigenschaften für uns zu verarbeiten.

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

Komponente hinzufügen

Jetzt haben wir Aktivitäten in unserem Staat. Lassen Sie uns für jede dieser Aktivitäten eine separate Komponente rendern. Jeder wird activityund emojisRequisiten brauchen .

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

    Im Inneren können appwir jetzt unsere neu erstellte Komponente mit allen entsprechenden Bindungen für activityund Emojis verwenden. Zur schnellen Erinnerung: Wenn wir ein Array durchlaufen und eine Komponente für jedes Element in einem Array in Vue anzeigen möchten, können wir die v-forBindung verwenden.

    Activity voter

              Add Activity    
         

    Fügen Sie Mutationen zum Speichern hinzu

    Wenn wir den Speicher in Vuex aktualisieren möchten, können wir Mutationen verwenden. Im Moment werden wir nur feststellen, console.logdass eine Mutation passiert ist und wir werden sie anschließend implementieren.

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

    Wie lösen wir eine Mutation aus? Wir rufen eine commitFunktion $storemit dem Namen der Mutationen auf, die ausgeführt werden sollen. Alle Argumente nach dem Namen einer Mutation werden als Argumente für eine festgeschriebene Mutation behandelt.

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

    Hinzufügen von Funktionen zur Komponente

    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 }}             ` });
  • We start with a blank app, which is what we wanted.

    And now if we add back the two activities we used to have in the app, vote on the ratings we have emojis that reflect how we feel about the activities!

    You can check out the full code here.