Die Vorbereitungsarbeiten sind nun abgeschlossen und wir können weitergehen.

Erkundung von Vuex

Zustandsverwaltung

In der Praxis bewältigen wir die Komplexität, indem wir Strategien verwenden, um die Inhalte, die wir verwenden möchten, zu organisieren und zu strukturieren. Wir fassen zusammengehörige Dinge in verschiedenen Abschnitten, Kategorien usw. zusammen. Es ist wie eine Buchbibliothek, in der die Bücher kategorisiert und in verschiedene Abschnitte eingeteilt werden, sodass wir leicht finden können, wonach wir suchen. Vuex ordnet die Anwendungsdaten und -logiken in Bezug auf den Status in vier Gruppen oder Kategorien ein: Status, Getter, Mutationen und Aktionen.

Zustand und Mutationen sind die Basis für jeden Vuex-Store:

• Zustand ist ein Objekt, das den Status der Anwendungsdaten enthält.
• Mutationen ist auch ein Objekt, das Methoden enthält, die den Zustand beeinflussen.

Getter und Aktionen sind wie logische Projektionen von Status und Mutationen:

• Getter enthalten Methoden, um den Zugriff auf den Status zu abstrahieren und ggf. Vorverarbeitungsjobs auszuführen (Daten berechnen, filtern usw.).
• Aktionen sind Methoden, um Mutationen auszulösen und asynchronen Code auszuführen.

Sehen wir uns das folgende Diagramm an, um die Dinge etwas klarer zu machen:

Auf der linken Seite haben wir ein Beispiel für einen Vuex-Store, den wir später in diesem Tutorial erstellen werden. Auf der rechten Seite haben wir ein Vuex-Workflow-Diagramm, das zeigt, wie die verschiedenen Vuex-Elemente zusammenarbeiten und miteinander kommunizieren.

Um den Zustand zu ändern, muss eine bestimmte Vue-Komponente Mutationen festlegen (z. this. $ store.commit ('increment', 3)) und dann ändern diese Mutationen den Zustand (Ergebnis wird 3). Danach werden die Getter dank des reaktiven Systems von Vue automatisch aktualisiert und rendern die Aktualisierungen in der Komponentensicht (mit dies. $ store.getters.score). 

Mutationen können keinen asynchronen Code ausführen, da dies die Aufzeichnung und Nachverfolgung von Änderungen in Debug-Tools wie Vue DevTools unmöglich macht. Um die asynchrone Logik verwenden zu können, müssen Sie sie in Aktionen umsetzen. In diesem Fall löst eine Komponente zuerst Aktionen aus (this. $ store.dispatch ('incrementScore', 3000)) wo der asynchrone Code ausgeführt wird, und diese Aktionen begehen Mutationen, die den Zustand verändern. 

Erstellen Sie ein Vuex Store-Skelett

Nachdem wir nun die Funktionsweise von Vuex erforscht haben, erstellen wir das Grundgerüst für unseren Vuex-Store. Fügen Sie den folgenden Code über dem ein ChildB Komponentenregistrierung:

const store = neuer Vuex.Store (state: , Getter: , Mutationen: , Aktionen: )

Um globalen Zugriff auf den Vuex-Store von jeder Komponente aus zu gewähren, müssen Sie das hinzufügen Geschäft Eigenschaft in der Vue-Instanz:

new Vue (el: '#app', store // den Vuex-Store global registrieren)

Nun können wir von jeder Komponente aus mit der dies. $ speichern Variable.

Wenn Sie das Projekt mit CodePen im Browser öffnen, sollte das folgende Ergebnis angezeigt werden.

Zustandseigenschaften

Das Statusobjekt enthält alle freigegebenen Daten in Ihrer Anwendung. Natürlich kann jede Komponente auch einen eigenen privaten Zustand haben.

Stellen Sie sich vor, Sie möchten eine Spieleanwendung erstellen, und Sie benötigen eine Variable, um die Punktzahl des Spiels zu speichern. Sie setzen es also in das Zustandsobjekt:

Zustand: Score: 0

Jetzt können Sie direkt auf die Punktzahl des Staates zugreifen. Gehen wir zurück zu den Komponenten und verwenden Sie die Daten aus dem Geschäft erneut. Um reaktive Daten aus dem Zustand des Geschäfts wiederverwenden zu können, sollten Sie berechnete Eigenschaften verwenden. Lass uns also eine erstellen Ergebnis() berechnete Eigenschaft in der übergeordneten Komponente:

berechnet: score () zurückgeben. $ store.state.score

Fügen Sie in der Vorlage der übergeordneten Komponente das ein Ergebnis Ausdruck:

 Punktzahl: score 

Und jetzt machen Sie dasselbe für die beiden untergeordneten Komponenten.

Vuex ist so schlau, dass es die ganze Arbeit für uns erledigt, um das System reaktiv zu aktualisieren Ergebnis Eigenschaft, wenn sich der Zustand ändert. Versuchen Sie, den Wert der Bewertung zu ändern, und sehen Sie, wie das Ergebnis in allen drei Komponenten aktualisiert wird.

Getters erstellen

Es ist natürlich gut, dass Sie das wiederverwenden können dies. $ store.state Stichwort in den Komponenten, wie Sie oben gesehen haben. Stellen Sie sich jedoch folgende Szenarien vor:

1. In einer umfangreichen Anwendung, bei der mehrere Komponenten mithilfe von auf den Status des Geschäfts zugreifen dies. $ store.state.score, Sie beschließen, den Namen von zu ändern Ergebnis. Das bedeutet, dass Sie den Namen der Variablen in jeder Komponente ändern müssen, die sie verwendet! 
2. Sie möchten einen berechneten Wert des Zustands verwenden. Angenommen, Sie möchten den Spielern einen Bonus von 10 Punkten geben, wenn die Punktzahl 100 Punkte erreicht. Wenn die Punktzahl 100 Punkte erreicht, werden 10 Punkte Bonus hinzugefügt. Dies bedeutet, dass jede Komponente eine Funktion enthalten muss, die die Bewertung wiederverwendet und um 10 erhöht. Sie haben in jeder Komponente wiederholt Code, was überhaupt nicht gut ist!

Glücklicherweise bietet Vuex eine funktionierende Lösung für solche Situationen. Stellen Sie sich den zentralisierten Getter vor, der auf den Status des Geschäfts zugreift und für jedes Element des Bundesstaates eine Getterfunktion bereitstellt. Bei Bedarf kann dieser Getter einige Berechnungen auf das Element des Status anwenden. Und wenn Sie die Namen einiger Eigenschaften des Bundesstaates ändern müssen, ändern Sie sie nur an einer Stelle in diesem Getter. 

Lass uns einen erstellen Ergebnis() Getter:

Getter: score (state) return state.score

Ein Getter erhält die Zustand als erstes Argument und verwendet es dann, um auf die Eigenschaften des Staates zuzugreifen.

Hinweis: Getter erhalten auch Getter als zweites Argument. Sie können damit auf die anderen Getter im Laden zugreifen.

Ändern Sie in allen Komponenten die Ergebnis() berechnete Eigenschaft zur Verwendung der Ergebnis() Getter statt der Punktzahl des Staates direkt.

berechnet: score () zurückgeben. $ store.getters.score

Nun, wenn Sie sich entscheiden, das zu ändern Ergebnis zu Ergebnis, Sie müssen es nur an einem Ort aktualisieren: im Ergebnis() Getter Probieren Sie es in diesem CodePen aus!

Mutationen erzeugen

Mutationen sind die einzig zulässige Möglichkeit, den Zustand zu ändern. Das Auslösen von Änderungen bedeutet einfach, Mutationen in Komponentenmethoden zu begehen.

Eine Mutation ist so ziemlich eine durch den Namen definierte Event-Handler-Funktion. Mutationshandlerfunktionen erhalten a Zustand als erstes Argument. Sie können auch ein zusätzliches zweites Argument übergeben, das als bezeichnet wird Nutzlast für die mutation. 

Lass uns einen erstellen Zuwachs() Mutation:

Mutationen: Inkrement (Status, Schritt) State.score + = Schritt

Mutationen können nicht direkt aufgerufen werden! Um eine Mutation durchzuführen, rufen Sie die verpflichten() Methode mit dem Namen der entsprechenden Mutation und möglichen zusätzlichen Parametern. Es könnte nur eine davon sein, wie die Schritt In unserem Fall gibt es mehrere, die in einem Objekt eingeschlossen sind.

Lass uns die verwenden Zuwachs() Mutation in den beiden untergeordneten Komponenten durch Erstellen einer Methode mit dem Namen changeScore ():

Methoden: changeScore () this. $ store.commit ('increment', 3); 

Wir begehen eine Mutation, anstatt sich zu verändern dies. $ store.state.score direkt, weil wir die durch die Mutation vorgenommene Änderung explizit verfolgen wollen. Auf diese Weise machen wir unsere Anwendungslogik transparenter, nachvollziehbarer und verständlicher. Darüber hinaus ist es möglich, Tools wie Vue DevTools oder Vuetron zu implementieren, die alle Mutationen protokollieren, Status-Snapshots erstellen und Zeitreise-Debugging durchführen können.

Nun lassen Sie uns die changeScore () Methode in Gebrauch. Erstellen Sie in jeder Vorlage der beiden untergeordneten Komponenten eine Schaltfläche und fügen Sie einen Klickereignislistener hinzu:

Score ändern

Wenn Sie auf die Schaltfläche klicken, wird der Status um 3 erhöht und diese Änderung wird in allen Komponenten angezeigt. Wir haben jetzt eine direkte komponentenübergreifende Kommunikation erreicht, die mit dem in Vue.j integrierten Mechanismus "Requis Down, Events Up" nicht möglich ist. Überprüfen Sie es in unserem CodePen-Beispiel.

Aktionen erstellen

Eine Aktion ist nur eine Funktion, die eine Mutation begeht. Der Status wird indirekt geändert, wodurch asynchrone Operationen ausgeführt werden können. 

Lass uns einen erstellen incrementScore () Aktion:

Aktionen: incrementScore: (Festschreiben, Verzögerung) => setTimeout (() => Festschreiben ('Zuwachs', 3), Verzögerung)

Aktionen erhalten die Kontext als erster Parameter, der alle Methoden und Eigenschaften aus dem Speicher enthält. Normalerweise extrahieren wir einfach die benötigten Teile mithilfe der ES2015-Argumentzerstörung. Das verpflichten Methode brauchen wir sehr oft. Aktionen erhalten ebenso wie Mutationen ein zweites Argument für die Nutzlast.

In dem ChildB Komponente, ändern Sie die changeScore () Methode:

Methoden: changeScore () this. $ store.dispatch ('incrementScore', 3000); 

Um eine Aktion aufzurufen, verwenden wir die Versand() Methode mit dem Namen der entsprechenden Aktion und zusätzlichen Parametern, genau wie bei Mutationen.

Jetzt die Score ändern Taste aus der ChildA Komponente erhöht die Punktzahl um 3. Die identische Schaltfläche von ChildB Komponente wird das gleiche tun, aber nach einer Verzögerung von 3 Sekunden. Im ersten Fall führen wir synchronen Code aus und verwenden eine Mutation. Im zweiten Fall führen wir asynchronen Code aus und müssen stattdessen eine Aktion verwenden. In unserem CodePen-Beispiel erfahren Sie, wie alles funktioniert.

Vuex-Mapping-Helfer

Vuex bietet einige hilfreiche Helfer an, mit denen der Status, Getter, Mutationen und Aktionen erstellt werden können. Anstatt diese Funktionen manuell zu schreiben, können wir Vuex anweisen, sie für uns zu erstellen. Mal sehen, wie es funktioniert.

Anstatt das zu schreiben Ergebnis() berechnete Eigenschaft wie folgt:

berechnet: score () zurückgeben. $ store.state.score

Wir benutzen nur die mapState () Helfer wie folgt:

berechnet: … Vuex.mapState (['score'])

Und das Ergebnis() Eigenschaft wird automatisch für uns erstellt.

Dasselbe gilt für die Getter, Mutationen und Aktionen. 

So erstellen Sie die Ergebnis() Getter verwenden wir die mapGetters () Helfer:

berechnet: … Vuex.mapGetters (['score'])

So erstellen Sie die changeScore () Methode verwenden wir die mapMutations () Helfer wie folgt:

Methoden: … Vuex.mapMutations (changeScore: 'increment')

Bei Mutationen und Aktionen mit dem Argument payload müssen wir dieses Argument in der Vorlage übergeben, in der der Ereignishandler definiert wird:

Score ändern

Wenn wir wollen changeScore () Um eine Aktion anstelle einer Mutation zu verwenden, verwenden wir mapActions () so was:

Methoden: … Vuex.mapActions (changeScore: 'incrementScore')

Wieder müssen wir die Verzögerung im Event-Handler definieren:

Score ändern

Hinweis: Alle Zuordnungshelfer geben ein Objekt zurück. Wenn wir sie also in Kombination mit anderen lokal berechneten Eigenschaften oder Methoden verwenden möchten, müssen wir sie in einem Objekt zusammenführen. Glücklicherweise mit dem Objektverteilungsoperator (… ), können wir es ohne Dienstprogramm tun. 

In unserem CodePen sehen Sie ein Beispiel, wie alle Mapping-Helfer in der Praxis verwendet werden.

Den Laden modularer gestalten

Es scheint, dass das Problem mit der Komplexität unseren Weg ständig blockiert. Wir haben es vorher gelöst, indem wir den Vuex-Store geschaffen haben, in dem wir die Zustandsverwaltung und die Komponentenkommunikation vereinfacht haben. In diesem Laden haben wir alles an einem Ort, leicht zu manipulieren und leicht zu verstehen. 

Mit dem Wachstum unserer Anwendung wird diese einfach zu verwaltende Speicherdatei jedoch immer größer und ist daher schwieriger zu warten. Wieder benötigen wir einige Strategien und Techniken, um die Anwendungsstruktur zu verbessern, indem wir sie in ihre leicht zu pflegende Form zurückkehren. In diesem Abschnitt werden wir verschiedene Techniken untersuchen, die uns bei diesem Unterfangen helfen können.

Verwendung von Vuex-Modulen

Vuex ermöglicht es uns, das Ladenobjekt in separate Module aufzuteilen. Jedes Modul kann seinen eigenen Zustand, Mutationen, Aktionen, Getter und andere verschachtelte Module enthalten. Nachdem wir die erforderlichen Module erstellt haben, registrieren wir sie im Geschäft.

Lass es uns in Aktion sehen:

const childB = state: result: 3, Getter: result (state) return state.result, Mutationen: erhöhen (state, step) state.result + = step, Aktionen: erhöhtResult : (Festschreiben, Verzögerung) => setTimeout (()) => Festschreiben ('erhöhen', 6), Verzögerung) const childA = state: score: 0, Getter: score ( state) return state.score, Mutationen: increment (state, step) state.score + = step, Aktionen: incrementScore: (Festschreiben, delay) => setTimeout (() =>) Festschreiben ('increment', 3), delay) const store = neuer Vuex.Store (module: scoreBoard: childA, resultBoard: childB)

Im obigen Beispiel haben wir zwei Module erstellt, eines für jede untergeordnete Komponente. Bei den Modulen handelt es sich lediglich um einfache Objekte, die wir als registrieren Anzeigetafel und resultBoard in dem Module Objekt im Laden. Der Code für childA ist das gleiche wie im Laden aus den vorherigen Beispielen. Im Code für childB, Wir fügen einige Änderungen an Werten und Namen hinzu.

Lass uns jetzt die ChildB Komponente, um die Änderungen in der resultBoard Modul. 

Vue.component ('ChildB', template: ' 
 
 Ergebnis: Ergebnis 
 Ergebnis ändern 
', berechnet: result () zurückgeben. $ store.getters.result, Methoden: changeResult () this. $ store.dispatch (' riseResult ', 3000); )

In dem ChildA Komponente, das einzige, was wir ändern müssen, ist die changeScore () Methode:

Vue.component ('ChildA', template: ' 
 
 Punktzahl: score 
 Score ändern 
', berechnet: score () zurückgeben. $ store.getters.score, Methoden: changeScore () this. $ store.dispatch (' incrementScore ', 3000); )

Wie Sie sehen, ist die Aufteilung des Speichers in Module wesentlich leichter und wartungsfreundlicher, während die Funktionalität dennoch erhalten bleibt. Überprüfen Sie den aktualisierten CodePen, um ihn in Aktion zu sehen.

Namensraum-Module

Wenn Sie einen oder denselben Namen für eine bestimmte Eigenschaft oder Methode in Ihren Modulen verwenden möchten oder müssen, sollten Sie den Namensraum in Betracht ziehen. Andernfalls können Sie einige merkwürdige Nebeneffekte beobachten, z. B. alle Aktionen mit demselben Namen ausführen oder die Werte des falschen Status abrufen. 

Um einem Vuex-Modul einen Namensraum zu geben, setzen Sie einfach das Namensraum Eigentum an wahr.

const childB = namespaced: true, state: score: 3, Getter: score (state) return state.score, Mutationen: increment (state, step) state.score + = step, Aktionen: incrementScore: (Festschreiben, Verzögerung) => setTimeout (())>> Festschreiben ('Inkrementieren', 6), Verzögerung) const childA = Namespace: wahr, Status: Score: 0, Getter: score (state) return state.score, Mutationen: increment (state, step) state.score + = step, Aktionen: incrementScore: (commit, delay) = > setTimeout (() => commit ('increment', 3), delay)

Im obigen Beispiel haben wir die Eigenschaften- und Methodennamen für die beiden Module gleich gemacht. Jetzt können wir eine Eigenschaft oder eine Methode verwenden, denen der Name des Moduls vorangestellt ist. Zum Beispiel, wenn wir die verwenden möchten Ergebnis() Getter von der resultBoard Modul, geben wir es so ein: ErgebnisBoard / Score. Wenn wir das wollen Ergebnis() Getter von der Anzeigetafel Modul, dann geben wir es so ein: scoreBoard / score. 

Lassen Sie uns nun unsere Komponenten ändern, um die vorgenommenen Änderungen widerzuspiegeln. 

Vue.component ('ChildB', template: ' 
 
 Ergebnis: Ergebnis 
 Ergebnis ändern 
', berechnet: result () zurückgeben. $ store.getters [' resultBoard / score '], method: changeResult () this. $ store.dispatch (' resultBoard / incrementScore ', 3000); ) Vue.component ('ChildA', template: ' 
 
 Punktzahl: score 
 Score ändern 
', berechnet: score () zurückgeben. $ store.getters [' scoreBoard / score '], Methoden: changeScore () this. $ store.dispatch (' scoreBoard / incrementScore ', 3000); )

Wie Sie in unserem CodePen-Beispiel sehen können, können wir jetzt die gewünschte Methode oder Eigenschaft verwenden und das erwartete Ergebnis erhalten.

Aufteilen des Vuex-Speichers in separate Dateien

Im vorherigen Abschnitt haben wir die Anwendungsstruktur durch die Aufteilung des Speichers in Module etwas verbessert. Wir haben den Store sauberer und übersichtlicher gestaltet, aber der gesamte Shopcode und seine Module liegen immer noch in derselben großen Datei. 

Der nächste logische Schritt ist also, den Vuex-Speicher in separate Dateien aufzuteilen. Die Idee ist, eine eigene Datei für den Store selbst und eine für jedes seiner Objekte, einschließlich der Module, zu haben. Dies bedeutet, dass separate Dateien für Status, Getter, Mutationen, Aktionen und für jedes einzelne Modul (store.js, state.js, getters.js, etc.) Ein Beispiel für diese Struktur finden Sie am Ende des nächsten Abschnitts.

Verwenden von Vue Single File-Komponenten

Wir haben den Vuex-Store so modular gestaltet, wie wir können. Als nächstes können wir dieselbe Strategie auch auf die Vue.js-Komponenten anwenden. Wir können jede Komponente in eine einzige, in sich geschlossene Datei mit einbinden .vue Erweiterung. Um zu erfahren, wie dies funktioniert, besuchen Sie die Dokumentationsseite zu Vue Single File Components. 

In unserem Fall haben wir drei Dateien: Parent.vue, ChildA.vue, und ChildB.vue. 

Schließlich, wenn wir alle drei Techniken kombinieren, erhalten wir die folgende oder ähnliche Struktur:

├── index.html └── src ├── main.js ├── App.vue ├── Komponenten │ ent Parent.vue ├── ChildA.vue ├── ChildB.vue store ├── store.js ├── state.js ├── getters.js mutations.js ├── actions.js └── module ├── childA.js └── childB.js

In unserem Tutorial GitHub-Repo sehen Sie das abgeschlossene Projekt mit der obigen Struktur.

Rekapitulieren

Lassen Sie uns einige wichtige Punkte zusammenfassen, die Sie bei Vuex beachten sollten:

Vuex ist eine staatliche Verwaltungsbibliothek, die uns beim Erstellen komplexer, umfangreicher Anwendungen hilft. Es verwendet einen globalen, zentralen Speicher für alle Komponenten in einer Anwendung. Um den Staat zu abstrahieren, verwenden wir Getter. Getter sind fast wie berechnete Eigenschaften und eine ideale Lösung, wenn wir zur Laufzeit etwas filtern oder berechnen müssen.

Der Vuex-Store ist reaktiv und Komponenten können den Status des Stores nicht direkt verändern. Die einzige Möglichkeit, den Status zu mutieren, ist das Festlegen von Mutationen, bei denen es sich um synchrone Transaktionen handelt. Jede Mutation sollte nur eine Aktion ausführen, muss so einfach wie möglich sein und ist nur für die Aktualisierung eines Teils des Zustands verantwortlich.

Asynchrone Logik sollte in Aktionen gekapselt werden. Jede Aktion kann eine oder mehrere Mutationen ausführen, und eine Mutation kann von mehr als einer Aktion festgeschrieben werden. Aktionen können komplex sein, sie ändern jedoch niemals den Status direkt.

Schließlich ist Modularität der Schlüssel zu Wartbarkeit. Um mit der Komplexität umzugehen und unseren Code modular zu gestalten, verwenden wir das "Divide and Conquer" -Prinzip und die Code-Splitting-Technik.

Fazit

Das ist es! Sie kennen die wichtigsten Konzepte von Vuex bereits und können sie in der Praxis anwenden.  

Aus Gründen der Kürze und Einfachheit habe ich absichtlich einige Details und Funktionen von Vuex weggelassen. Sie müssen daher die gesamte Vuex-Dokumentation lesen, um alles über Vuex und seine Funktionen zu erfahren.