Schnelles Verständnis und Beispielanwendung der Vuex-Zustandsmaschine

1. Schnelles Verständnis von Konzepten:

1. So teilen Sie Daten zwischen Komponenten:

Hierzu bieten sich in der Regel folgende Möglichkeiten an:

1. Übergeben von Werten vom übergeordneten Element an das untergeordnete Element: v-bind-Attributbindung ;
2. Kind übergibt Wert an Elternteil: v-on-Ereignisbindung ;
3. Teilen von Daten zwischen Geschwisterkomponenten: EventBus ;

2. Was ist vuex:

1. Laut offizieller Erklärung ist Vuex ein speziell für Vue.js-Anwendungen entwickelter Statusverwaltungsmodus. Es verwaltet den Status aller Komponenten einer Anwendung über einen zentralen Speicher und sorgt durch entsprechende Regeln für vorhersehbare Statusänderungen. Vuex ist außerdem in die Devtools-Erweiterung (öffnet neues Fenster) des offiziellen Debugging-Tools von Vue integriert und bietet erweiterte Debugging-Funktionen wie Time-Travel-Debugging ohne Konfiguration, Importieren und Exportieren von Status-Snapshots usw.
2. Einfach ausgedrückt ist Vuex ein Mechanismus zur Implementierung der globalen Zustands- (Daten-)Verwaltung von Komponenten, mit dem sich problemlos die gemeinsame Nutzung von Daten zwischen Komponenten realisieren lässt.

3. Vorteile der Verwendung von Vuex:

1. Möglichkeit, gemeinsam genutzte Daten in Vuex zentral zu verwalten, was die Entwicklung und spätere Wartung erleichtert.
2. Es kann die gemeinsame Nutzung von Daten zwischen Komponenten effizient realisieren und die Entwicklungseffizienz verbessern.
3. Die in vuex gespeicherten Daten reagieren und können die Daten und die Seite in Echtzeit synchronisieren.
4. Lösen Sie das Nachrichtenübermittlungsproblem bei nicht über- und untergeordneten Komponenten (Speichern von Daten im Status).
5. Die Anzahl der AJAX-Anfragen wird reduziert und einige Szenarien können direkt aus dem Status im Speicher abgerufen werden.
   

Generell müssen nur zwischen Komponenten gemeinsame Daten in Vuex gespeichert werden. Für private Daten in Komponenten ist dies allerdings nicht notwendig und diese können weiterhin in den eigenen Daten der Komponente gespeichert werden. Wenn Sie sie alle in Vuex speichern möchten, ist das natürlich auch in Ordnung.

2. Grundlegende Verwendung:

1. Installieren Sie Abhängigkeitspakete:

npm installiere vuex --save

2. Abhängige Pakete importieren:

Vue von „vue“ importieren
Vuex von „vuex“ importieren

Vue.Verwenden(Vuex)

3. Erstellen Sie ein Store-Objekt:

Vue von „vue“ importieren
Vuex von „vuex“ importieren

Vue.Verwenden(Vuex)

const store = neuer Vuex.Store({
//Der Status speichert den global freigegebenen Datenstatus: {
    Anzahl: 0
  }
})

4. Hängen Sie das Store-Objekt an die Vue-Instanz an:

neuer Vue({
  el: '#app',
  speichern
})

An diesem Punkt können alle Komponenten Daten aus dem Store abrufen.

3. Erstellen Sie ein Projekt:

Im Folgenden wird der Prozess zum Erstellen eines Vue-Projekts beschrieben . Später werden weitere Fälle beschrieben:

(1) Öffnen Sie das cmd-Fenster und geben Sie vue ui ein, um das Vue-Visualisierungsfenster zu öffnen:

(2) Wählen Sie den neuen Projektpfad:

(3) Namensgebung:

(4) Wählen Sie die Konfiguration manuell aus. Beachten Sie, dass die Version vue2 verwendet wird:

(5) Erstellen:

(6) Nächste Schritte:

(7) Gehen Sie nach erfolgreicher Erstellung in das entsprechende Verzeichnis und öffnen Sie vscode, um mit der Programmierung zu beginnen:

(8) Führen Sie das Projekt aus:

4. Voraussetzungen für die Erklärung:

Voraussetzungen (Hinweis):

Schreiben Sie einen kleinen Gegenfall, und Sie können schneller mit Vuex beginnen , indem Sie die Konzepte aus dem Fall kombinieren. Daher wird im folgenden Codeabschnitt das Kernkonzept anhand dieses kleinen Falles demonstriert. Ziel: Schreibe zwei Kindkomponenten mit einem gemeinsamen Zählwert. In der Elternkomponente verringert eine Komponente den Zählwert nach einem Klick um 1, die andere Komponente erhöht den Zählwert nach einem Klick um 1.

Anfangscode der übergeordneten Komponente App.vue:

<Vorlage>
  <div id="app">
       <meine-Adresse></meine-Adresse>
       <p>--------------------</p>
       <mein-reduzieren></mein-reduzieren>
  </div>
</Vorlage>

<Skript>
//Komponenten importieren importiere Add aus './components/Add.vue'
importiere Reduce aus './components/Reduce.vue'
Standard exportieren {
  Name: "App",
  Daten() {
    zurückkehren {
      
    }
  },
  Komponenten:
    'my-add': Hinzufügen,
    'my-reduce': Reduzieren
  }

}
</Skript>

Anfangscode der Unterkomponente Add.vue:

<Vorlage>
    <div>
        <p>Der Zählwert ist:</p>
           <button>+1</button>
    </div>
 
</Vorlage>
<Skript>
  Standard exportieren{
      Daten() {
          zurückkehren {
              
          }
      },
  }
</Skript>

Anfangscode der Unterkomponente Reduce.vue:

<Vorlage>
    <div>
         <p>Der Zählwert ist:</p>
           <Schaltfläche>-1</Schaltfläche>
    </div>
</Vorlage>
<Skript>
  Standard exportieren{
      Daten() {
          zurückkehren {
              
          }
      },
  }
</Skript>

Der Anfangscode des Store-Objekts lautet:

Vue von „vue“ importieren
Vuex von „vuex“ importieren

Vue.Verwenden(Vuex)

exportiere standardmäßig neuen Vuex.Store({
  Zustand: {
    Anzahl: 0
  }
})

Erstwirkung:

5. Kernkonzepte:

1.Zustand:

Offiziellen Angaben zufolge verwendet Vuex einen einzigen Zustandsbaum – ja, ein Objekt enthält den gesamten Zustand auf Anwendungsebene. Ab diesem Zeitpunkt existiert es als „Single Source of Data (SSOT)“. Dies bedeutet auch, dass jede Anwendung nur eine Store-Instanz enthält.

Einfach ausgedrückt stellt der Staat die einzige öffentliche Datenquelle dar und alle freigegebenen Daten müssen im Staatlichen Speicher gespeichert werden.

1.1 Die erste Möglichkeit, auf den Status einer Komponente zuzugreifen:

Geben Sie folgenden Befehl direkt in der Komponente ein:

der von this.$store.state referenzierte Datenname.

Wie in der Add.vue-Unterkomponente zitiert:

<Vorlage>
    <div>
        <p>Der Zählwert ist: {{this.$store.state.count}}</p>
           <button>+1</button>
    </div> 
</Vorlage>
//Der folgende Code ist derselbe wie zuvor und wird daher weggelassen.

Bei Betrachtung des Effekts zeigt sich, dass der Wert von count 0 ist:

1.2 Die zweite Möglichkeit, auf den Status einer Komponente zuzugreifen:

(1) Importieren Sie die MapState-Funktion bei Bedarf aus Vuex.

importiere { mapState } von 'vuex'

(2) Durch die soeben importierte Funktion mapState werden die von der aktuellen Komponente benötigten globalen Daten den berechneten Eigenschaften der aktuellen Komponente zugeordnet:

berechnet: {
   ...mapState([Anzahl])
}

Tipps: computed wird verwendet, um selbst definierte Variablen zu überwachen. Die Variable wird nicht in data deklariert, sondern direkt in computed definiert. Anschließend kann auf der Seite eine bidirektionale Datenbindung durchgeführt werden, um das Ergebnis anzuzeigen oder für andere Verarbeitungen zu verwenden.

Wie in der Reduce.vue-Unterkomponente zitiert:

<Vorlage>
    <div>
         <p>Der Zählwert ist: {{count}}</p>
           <Schaltfläche>-1</Schaltfläche>
    </div>
</Vorlage>
<Skript>
importiere {mapState} von 'vuex'
  Standard exportieren{
      Daten() {
          zurückkehren {
              
          }
      },
      berechnet: {
         ...mapState(['Anzahl'])
      }
  }
</Skript>

Wenn man den Effekt betrachtet, wird auch der Wert von count als 0 angezeigt:

2. Mutation:

Laut offizieller Erklärung besteht die einzige Möglichkeit, den Status im Vuex-Store zu ändern, darin, eine Mutation einzureichen. Mutationen in Vuex sind Ereignissen sehr ähnlich: Jede Mutation hat einen String-Ereignistyp (Typ) und eine Rückruffunktion (Handler). Mit dieser Rückruffunktion nehmen wir tatsächlich die Statusänderung vor und sie erhält den Status als erstes Argument.

Einfach ausgedrückt wird Mutation verwendet, um die Daten im Store zu ändern.
① Store-Daten können nur durch Mutation geändert werden und die Daten im Store können nicht direkt bearbeitet werden.
② Obwohl diese Methode etwas komplizierter zu bedienen ist, können damit Änderungen aller Daten zentral überwacht werden.

Um beispielsweise die Operation zum Erhöhen des Zählwerts um 1 zu implementieren, definieren Sie zunächst eine Funktion, die die Bewegungen um 1 erhöht. Wenn die entsprechende Unterkomponente es dann verwenden möchte, kann die Komponente die Mutation direkt einführen und die entsprechende Funktion aufrufen.

Wie folgt muss die Add.vue-Unterkomponente die Funktion „Selbstinkrement 1“ implementieren:

Definieren Sie zunächst eine Funktion add, die eine Selbstinkrementierung der Mutationen in der Zustandsmaschine erreichen kann:

exportiere standardmäßig neuen Vuex.Store({
  Zustand: {
    Anzahl: 0
  },
  Mutationen:
    //Selbstinkrementierung 1 Funktion add(state){
      Zustand.Anzahl++
    }
  }
})

2.1 Der erste Weg, eine Mutation auszulösen:

Binden Sie in der Unterkomponente Add.vue das Klickereignis an die Schaltfläche und lösen Sie die Mutation aus:

<Vorlage>
    <div>
        <p>Der Zählwert ist: {{this.$store.state.count}}</p>
           <button @click="btnAdd">+1</button>
    </div>
 
</Vorlage>
<Skript>
  Standard exportieren{
      Daten() {
          zurückkehren {
              
          }
      },
      Methoden: {
          btnAdd() {
              // Die erste Möglichkeit, eine Mutation einzuführen, besteht darin, die Add-Funktion this.$store.commit('add') auszulösen.
          }
      }
  }
</Skript>

Schauen Sie sich den Effekt zur Erzielung einer Klick-Selbsterhöhung an:

2.2 Mutation auslösen und Parameter übergeben:

Natürlich können auch Parameter übergeben werden, wenn die Komponente die Funktion in der Mutation aufruft.

Beispielsweise gibt es eine selbstinkrementierende Funktion, deren Inkrementbetrag jedoch von den beim Aufruf übergebenen Parametern abhängt:

exportiere standardmäßig neuen Vuex.Store({
  Zustand: {
    Anzahl: 0
  },
  Mutationen:
    // Parameter übergeben, der erste muss der Status sein, der zweite ist der übergebene Parameter // Funktion, die n selbstständig erhöht addN(state,n){
      Zustand.Anzahl+= n
    }
  }
})

Beim Aufruf der entsprechenden Komponente müssen folgende Parameter übergeben werden:

  Methoden: {
          btnAdd2() {
              // Mutationsmethode einführen, addN-Funktion auslösen // und Parameter übergeben, um 6 erhöhen this.$store.commit('addN',6)
          }
      }

2.1 Die zweite Möglichkeit, eine Mutation auszulösen:

(1) Importieren Sie die Funktion mapMutations bei Bedarf aus vuex

importiere { mapMutations } von 'vuex'

(2) Ordnen Sie über die soeben importierte Funktion mapMutations die erforderliche Mutationsfunktion der Methodenmethode der aktuellen Komponente zu:

Methoden: {
   …mapMutations(['Hinzufügen','addN'])
}

Realisieren Sie in der Praxis die Funktionsanforderung der Reduce.vue-Komponente, den Wert beim Klicken um 1 zu reduzieren:

Die Zustandsmaschine fügt eine Dekrementfunktion hinzu:

exportiere standardmäßig neuen Vuex.Store({
  Zustand: {
    Anzahl: 0
  },
  Mutationen:
    //Selbstinkrementierung 1 Funktion add(state){
      Zustand.Anzahl++
    },
    // Funktion, die um 1 dekrementiert sub(state){
      Zustand.Anzahl--
    }
  }
})

Die Komponente Reduce.vue verkleinert sich selbst um 1, wenn Sie auf die Schaltfläche klicken:

<Vorlage>
    <div>
         <p>Der Zählwert ist: {{count}}</p>
           <button @click="btnSub">-1</button>
    </div>
</Vorlage>
<Skript>
//Importieren importiere {mapState,mapMutations} von 'vuex'
  Standard exportieren{
      Daten() {
          zurückkehren {
              
          }
      },
      berechnet: {
         ...mapState(['Anzahl'])
      },
      Methoden: {
          // Ordnen Sie die Unterfunktion in der Mutation zu ... mapMutations(['sub']),
          // Zum Dekrementieren rufen Sie die Unterfunktion btnSub(){ auf.
             dies.sub()
          }
      }
  }
</Skript>

Sehen Sie die Wirkung:

3.Aktion:

Bisher wurde der Fall im vierten Punkt abgeschlossen und Selbstinkrement und Selbstdekrement wurden implementiert. Lassen Sie uns nun den Fall verbessern. Wir müssen eine Sekunde vor dem Selbstinkrement und Selbstdekrement auf die Schaltfläche klicken . Wie können wir das erreichen? Kann ich der Funktion in der Mutation in der Zustandsmaschine einen 1-Sekunden-Timer hinzufügen? Dies ist definitiv nicht möglich, da die Mutation keine asynchronen Operationen unterstützt . Was soll ich also tun? Ding ding ding, Action feiert sein Debüt.

Aktionen können beliebige asynchrone Vorgänge enthalten und werden daher zur Handhabung asynchroner Aufgaben verwendet.
Die Aktion übermittelt eine Mutation, anstatt den Status direkt zu ändern. Bedenken Sie, dass die Daten im Status nicht direkt geändert werden können. Dies ist nur durch eine Mutation möglich. Das heißt, wenn Sie Daten durch asynchrone Vorgänge ändern möchten, müssen Sie Action statt Mutation verwenden. Sie müssen die Daten jedoch immer noch indirekt ändern, indem Sie Mutation in Action auslösen.

Definieren Sie zunächst die Aktion in der Zustandsmaschine:

exportiere standardmäßig neuen Vuex.Store({
  Zustand: {
    Anzahl: 0
  },
  Mutationen:
    //Selbstinkrementierung 1 Funktion add(state){
      Zustand.Anzahl++
    },
    // Funktion, die um 1 dekrementiert sub(state){
      Zustand.Anzahl--
    }
  },
  // Aktion definieren, die darin enthaltene Funktion addAsync implementiert die Add-Funktion in Mutation nach 1-Sekunden-Aktionen: {
    addAsync(Kontext) {
      setzeTimeout(()=>{
      //Muss die Mutation durch context.commit()context.commit('add') auslösen
    },1000)
  }  
 }
})

Aktionsfunktionen akzeptieren ein Kontextobjekt, das über dieselben Methoden und Eigenschaften wie die Store-Instanz verfügt, sodass Sie context.commit aufrufen können, um eine Mutation festzuschreiben.

3.1 Die erste Möglichkeit eine Aktion auszulösen:

Ändern Sie den Add.vue-Code der Komponente, führen Sie eine Aktion ein und implementieren Sie einen asynchronen Selbstinkrementierungsvorgang.

<Vorlage>
    <div>
        <p>Der Zählwert ist: {{this.$store.state.count}}</p>
           <button @click="btnAdd">+1</button>
    </div>
 
</Vorlage>
<Skript>
  Standard exportieren{
      Daten() {
          zurückkehren {
              
          }
      },
      Methoden: {
          btnAdd() {
              // Die erste Möglichkeit, Action einzuführen, besteht darin, die Funktion addAsync auszulösen. // Der Dispatch hier wird speziell verwendet, um die Aktionsfunktion this.$store.dispatch('addAsync') aufzurufen.
          }
      }
  }
</Skript>

Sehen Sie sich den Effekt an und erkennen Sie die Selbsterhöhung nach 1 Sekunde:

3.2 Lösen Sie die asynchrone Aktionsaufgabe aus und übergeben Sie Parameter:

Natürlich können auch Parameter übergeben werden, wenn die Komponente die Funktion in der Aktion aufruft.

Beispielsweise gibt es eine selbstinkrementierende Funktion, die 1 Sekunde nach einem Klick ausgeführt wird, der Umfang der Inkrementierung hängt jedoch von den beim Aufruf übergebenen Parametern ab:

Definition:

exportiere standardmäßig neuen Vuex.Store({
  Zustand: {
    Anzahl: 0
  },
  Mutationen:
   // Parameter übergeben, der erste muss der Status sein, der zweite ist der übergebene Parameter // Funktion, die n selbstständig erhöht addN(state,n){
      Zustand.Anzahl+= n
    }
  },
   Aktionen: {
    // Es gibt einen Parameter n, der an die Funktion addN in der Mutation addNAsync(context,n) { übergeben wird.
      setzeTimeout(()=>{
         Kontext.commit('addN',n)
    },1000)
  }  
 }
})

Beim Aufruf der entsprechenden Komponente müssen folgende Parameter übergeben werden:

  Methoden: {
          btnAdd2() {
              // Rufe die Dispatch-Funktion auf // Übergebe den Parameter beim Auslösen der Aktion, der 6 ist, was eine Erhöhung um 6 anzeigt
              dies.$store.dispatch('addNAsync',6)
          }
      }

3.3 Die zweite Möglichkeit eine Aktion auszulösen:

(1) Importieren Sie die mapActions-Funktion nach Bedarf aus vuex

importiere { mapActions } von 'vuex'

(2) Ordnen Sie über die soeben importierte mapActions-Funktion die erforderliche Aktionsfunktion der Methodenmethode der aktuellen Komponente zu:

Methoden: {
   ...mapActions(['Hinzufügen','addN'])
}

Realisieren Sie in der Praxis die Funktionsanforderung der Reduce.vue-Komponente, nach einer Sekunde Klicken eine Reduzierung um 1 vorzunehmen:

Definieren Sie subAsync in Aktionen als selbstdekrementierende Funktion nach einer Sekunde:

exportiere standardmäßig neuen Vuex.Store({
  Zustand: {
    Anzahl: 0
  },
  Mutationen:
    //Selbstinkrementierung 1 Funktion add(state){
      Zustand.Anzahl++
    },
    // Funktion, die um 1 dekrementiert sub(state){
      Zustand.Anzahl--
    }
  },
   Aktionen: {
    addAsync(Kontext) {
      setzeTimeout(()=>{
         Kontext.Commit('Hinzufügen')
    },1000)
  },
   subAsync(Kontext) {
      setzeTimeout(()=>{
         Kontext.commit('sub')
    },1000)
  }    
 }
})

Ändern Sie den Reduce.vue-Code, um die Funktion zu implementieren:

<Vorlage>
    <div>
         <p>Der Zählwert ist: {{count}}</p>
           <button @click="btnSub">-1</button>
    </div>
</Vorlage>
<Skript>
//Importieren importiere {mapState,mapActions} von 'vuex'
  Standard exportieren{
      Daten() {
          zurückkehren {
              
          }
      },
      berechnet: {
         ...mapState(['Anzahl'])
      },
      Methoden: {
          // Ordnen Sie die Funktionen in Action...mapActions(['subAsync']) zu,
          // Zum Dekrementieren rufen Sie die SubAsync-Funktion btnSub(){ auf.
             dies.subAsync()
          }
      }
  }
</Skript>

Sehen Sie die Wirkung:

4. Getter:

Getter wird verwendet, um die Daten im Store zu verarbeiten und neue Daten zu bilden. Und bitte beachten Sie, dass die Daten im Status dadurch nicht geändert werden.
①Getter kann die vorhandenen Daten im Store verarbeiten, um neue Daten zu bilden, ähnlich den berechneten Eigenschaften von Vue.
②Wenn sich die Daten im Store ändern, ändern sich auch die Daten im Getter.

Beispielsweise gibt es eine Getter-Funktion, die den aktuellen Zählerstand + 1 zurückgibt:

exportiere standardmäßig neuen Vuex.Store({
  Zustand: {
    Anzahl: 0
  },
 Getter: {
    zeigeNum(Zustand){
      return `Der aktuelle Zählwert plus 1 ist: ${state.count+1}`
    }
  }
})

4.1 Die erste Möglichkeit, Getter auszulösen:

dies.$store.getters.name

Anzeige in der App.vue-Komponente:

<Vorlage>
  <div id="app">
       <meine-Adresse></meine-Adresse>
       <p>--------------------</p>
       <mein-reduzieren></mein-reduzieren>
       <p>--------------------</p>
       <h3>{{this.$store.getters.showNum}}</h3>
  </div>
</Vorlage>

Wirkung:

4.2 Die zweite Möglichkeit, Getter auszulösen:

(1) Importieren Sie die MapGetters-Funktion bei Bedarf aus Vuex

importiere { mapGetters } von 'vuex'

(2) Ordnen Sie mit der soeben importierten MapGetters-Funktion die von der aktuellen Komponente benötigten globalen Daten den berechneten Eigenschaften der aktuellen Komponente zu:

berechnet: {
   ...mapGetters(['showNum'])
}

Oder verwenden Sie es in App.vue:

<Vorlage>
  <div id="app">
       <meine-Adresse></meine-Adresse>
       <p>--------------------</p>
       <mein-reduzieren></mein-reduzieren>
       <p>--------------------</p>
       <h3>{{showNum}}</h3>
  </div>
</Vorlage>

<Skript>
//Komponenten importieren importiere Add aus './components/Add.vue'
importiere Reduce aus './components/Reduce.vue'
// MapGetters-Funktion importieren importiere {mapGetters} von „vuex“
Standard exportieren {
  Name: "App",
  Daten() {
    zurückkehren {
      
    }
  },
  Komponenten:
    'my-add': Hinzufügen,
    'my-reduce': Reduzieren
  },
  //Getter einführen
  berechnet: {
    ...mapGetters(['showNum'])
  }

}
</Skript>

Sehen Sie, der gleiche Effekt:

6. Zusammenfassung:

Damit ist dieser Artikel zum schnellen Verständnis und zur Beispielanwendung der Vuex-Zustandsmaschine abgeschlossen. Weitere relevante Inhalte zur Anwendung der Vuex-Zustandsmaschine finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!