Einführung in die Vue-Grundlagen: Installation und Verwendung von Vuex

Einführung in die Vue-Grundlagen: Installation und Verwendung von Vuex

Dieses Tutorial ist ein Einführungstutorial. Wenn Fehler vorhanden sind, weisen Sie bitte darauf hin.

1. Was ist vuex

Vuex ist ein speziell für Vue.js-Anwendungen entwickeltes Zustandsverwaltungsmuster. Es verwendet einen zentralen Speicher, um den Status aller Komponenten der Anwendung zu verwalten, und verwendet entsprechende Regeln, um sicherzustellen, dass sich der Status auf vorhersehbare Weise ändert. Detaillierte Informationen finden Sie im offiziellen Website-Dokument vuex.vuejs.org/zh/

Nachfolgend finden Sie eine kurze Einführung in vuex

2. Installation und Einführung

Installieren Sie zuerst vuex.

npm installiere vuex --save

Es kann verwendet werden, nachdem es in main.js eingeführt wurde.

// Die Vue-Build-Version, die mit dem Befehl „import“ geladen werden soll
// (nur Laufzeit oder Standalone) wurde in webpack.base.conf mit einem Alias ​​festgelegt.
Vue von „vue“ importieren
App aus „./App“ importieren
Router aus „./router“ importieren
//vuex verwendet import Vuex von 'vuex'

Vue.Verwenden(Vuex)
const store = neuer Vuex.Store({
    Zustand: {
        //Anzahl globaler Variablen: 31231
    }
})

Vue.config.productionTip = falsch
    /* eslint-deaktivieren Sie no-new */
neuer Vue({
    el: '#app',
    Router,
    //vuex muss zum Store hinzugefügt werden,
    Komponenten: { App },
    Vorlage: '<App/>'
})

3. Verwendung von vuex

<Vorlage>
<div>
      Der Chef hat {{showData}}
      <HalloWelt2/>
</div>
</Vorlage>

<Skript>
importiere HelloWorld2 aus './HelloWorld2'
Sohn aus './son' importieren

Standard exportieren {
Name: "Hallo Welt",
Daten () {
  zurückkehren {
       Nachricht2:"",
       cou
    }
},
Komponenten: {
  HalloWelt2,
  Sohn
},berechnet: {
  zeigeDaten(){
    gib dies zurück.$store.state.count;
  }
}
}

</Skript>

<Vorlage>
<div>
Der zweite hat {{$store.state.count}}
</div>
</Vorlage>

<Skript>
Standard exportieren {
Name: 'HelloWorld2',
Daten() {
      zurückkehren {
      }
    }
}
</Skript>

4. Prozesseinführung

Wie in der Abbildung gezeigt, lautet der Prozess, wenn vuex nicht verwendet wird: Ansicht->Aktionen->Status->Ansicht

​

Nach der Verwendung von Vuex lautet der Prozess Vuecomponent->(Dispatch)Actions->(Commit)Mutations->(Mutate)State->(Render)->Vuecomponent

5. Mutation

Statusänderungen. Die einzige Möglichkeit, den Status im Vuex-Store zu ändern, besteht darin, eine Mutation zu übermitteln. 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.

// Die Vue-Build-Version, die mit dem Befehl „import“ geladen werden soll
// (nur Laufzeit oder Standalone) wurde in webpack.base.conf mit einem Alias ​​festgelegt.
Vue von „vue“ importieren
App aus „./App“ importieren
Router aus „./router“ importieren
//vuex verwendet import Vuex von 'vuex'

Vue.Verwenden(Vuex)
const store = neuer Vuex.Store({
    Zustand: {
        //Anzahl globaler Variablen: 31231
    },
    //Statusänderungsmethode Mutationen: {
        //state ist der obige Status
        addData(Status) {
            //Zustand ändern state.count++
        }
    }
})

Vue.config.productionTip = falsch
    /* eslint-deaktivieren Sie no-new */
neuer Vue({
    el: '#app',
    Router,
    //vuex muss zum Store hinzugefügt werden,
    Komponenten: { App },
    Vorlage: '<App/>'
})

Führen Sie dann die Änderung durch

<Vorlage>
<div>
      Der Chef hat {{showData}}
      <HalloWelt2/>
      <button type = "button" v-on:click = "changeData"> Schaltfläche ändern</button>
</div>
</Vorlage>

<Skript>
importiere HelloWorld2 aus './HelloWorld2'
Sohn aus './son' importieren

Standard exportieren {
Name: "Hallo Welt",
Daten () {
  zurückkehren {
       Nachricht2:"",
    }
},
Komponenten: {
  HalloWelt2,
  Sohn
},berechnet: {
  zeigeDaten(){
    gib dies zurück.$store.state.count;
  }
},
Methoden: {
  //Änderungen ausführen changeData(event){
      dies.$store.commit("addData");
  }
}
}

</Skript>

6. Getter-Filterung

Sie können Mutationen begrenzen. Wenn die Mutation beispielsweise kleiner als 0 ist, kann sie nicht reduziert werden.

// Die Vue-Build-Version, die mit dem Befehl „import“ geladen werden soll
// (nur Laufzeit oder Standalone) wurde in webpack.base.conf mit einem Alias ​​festgelegt.
Vue von „vue“ importieren
App aus „./App“ importieren
Router aus „./router“ importieren
//vuex verwendet import Vuex von 'vuex'

Vue.Verwenden(Vuex)
const store = neuer Vuex.Store({
    Zustand: {
        //Anzahl globaler Variablen: 0
    },
    //Statusänderungsmethode Mutationen: {
        //state ist der obige Status
        addData(Status) {
            //Zustand ändern state.count++
        }
    },
    //Filtergetter: {
        getState(Zustand) {
            wenn (Zustand.Anzahl >= 5) {
                Rückkehr 5
            } anders {
                Statusanzahl zurückgeben
            }
        }
    }
})

Vue.config.productionTip = falsch
    /* eslint-deaktivieren Sie no-new */
neuer Vue({
    el: '#app',
    Router,
    //vuex muss zum Store hinzugefügt werden,
    Komponenten: { App },
    Vorlage: '<App/>'
})

Beim Anrufen

<Vorlage>
<div>
Der zweite hat {{$store.getters.getState}}
</div>
</Vorlage>

<Skript>
Standard exportieren {
Name: 'HelloWorld2',
Daten() {
      zurückkehren {
      }
    }
}
</Skript>

7.Aktion - Asynchrone Verarbeitung

Die Aktion ähnelt der Mutation, außer dass:

Die Aktion übermittelt eine Mutation, anstatt den Status direkt zu ändern. Die Aktion kann beliebige asynchrone Vorgänge enthalten. Mutationen können nur synchron verarbeitet werden
Haupt-JavaScript: Hier ist ein Beispiel:

// Die Vue-Build-Version, die mit dem Befehl „import“ geladen werden soll
// (nur Laufzeit oder Standalone) wurde in webpack.base.conf mit einem Alias ​​festgelegt.
Vue von „vue“ importieren
App aus „./App“ importieren
Router aus „./router“ importieren
//vuex verwendet import Vuex von 'vuex'

Vue.Verwenden(Vuex)
const store = neuer Vuex.Store({
    Zustand: {
        //Anzahl globaler Variablen: 0
    },
    //Statusänderungsmethode Mutationen: {
        //state ist der obige Status
        addData(Status) {
            //Zustand ändern state.count++
        }
    },
    //Filtergetter: {
        getState(Zustand) {
            wenn (Zustand.Anzahl >= 5) {
                Rückkehr 5
            } anders {
                Statusanzahl zurückgeben
            }
        }
    },
    Aktionen: {
        //Der Vorteil der aktionsgesteuerten Mutationsmethode ist die asynchrone Verarbeitung addData(context) {
            //Asynchron simulieren setTimeout(() => {
                Kontext.commit('Daten hinzufügen')
            }, 1000)
        }
    }
})

Vue.config.productionTip = falsch
    /* eslint-deaktivieren Sie no-new */
neuer Vue({
    el: '#app',
    Router,
    //vuex muss zum Store hinzugefügt werden,
    Komponenten: { App },
    Vorlage: '<App/>'
})

Aktion soll beim Senden aufgerufen werden.

<Vorlage>
<div>
      Der Chef hat {{showData}}
      <HalloWelt2/>
      <button type = "button" v-on:click = "changeData"> Schaltfläche ändern</button>
</div>
</Vorlage>

<Skript>
importiere HelloWorld2 aus './HelloWorld2'
Sohn aus './son' importieren

Standard exportieren {
Name: "Hallo Welt",
Daten () {
  zurückkehren {
       Nachricht2:"",
    }
},
Komponenten: {
  HalloWelt2,
  Sohn
},berechnet: {
  zeigeDaten(){
    gib dies zurück.$store.getters.getState;
  }
},
Methoden: {
  //Änderungen ausführen changeData(event){
      //Operationsmutationsmethode //this.$store.commit("addData");
      //Die Aktion soll anstelle der durch die Aktion ausgelösten Mutationsmethode ausgeführt werden this.$store.dispatch("addData");

  }
}
}

</Skript>

8.Modul

Durch die Verwendung eines einzelnen Zustandsbaums werden alle Anwendungszustände in einem großen Objekt zentralisiert. Wenn Ihre Anwendung sehr komplex wird, kann das Store-Objekt ziemlich aufgebläht werden.

Um die oben genannten Probleme zu lösen, ermöglicht uns Vuex, den Store in Module aufzuteilen. Jedes Modul hat seinen eigenen Status, seine eigene Mutation, Aktion, Getter und sogar verschachtelte Untermodule – von oben nach unten immer gleich aufgeteilt:

Wenn die Route aufgeteilt werden kann, wird die Datei nicht in main.js, sondern in vuex abgelegt. Erstellen Sie eine neue store/index.js

//vuex verwendet import Vue von 'vue'
Vuex von „vuex“ importieren

Vue.Verwenden(Vuex)

exportiere standardmäßig neuen Vuex.Store({
    Zustand: {
        //Anzahl globaler Variablen: 0
    },
    //Statusänderungsmethode Mutationen: {
        //state ist der obige Status
        addData(Status) {
            //Zustand ändern state.count++
        }
    },
    //Filtergetter: {
        getState(Zustand) {
            wenn (Zustand.Anzahl >= 5) {
                Rückkehr 5
            } anders {
                Statusanzahl zurückgeben
            }
        }
    },
    Aktionen: {
        //Der Vorteil der aktionsgesteuerten Mutationsmethode ist die asynchrone Verarbeitung addData(context) {
            //Asynchron simulieren setTimeout(() => {
                Kontext.Commit('Daten hinzufügen')
            }, 1000)
        }
    }
})

Ändern Sie main.js

// Die Vue-Build-Version, die mit dem Befehl „import“ geladen werden soll
// (nur Laufzeit oder Standalone) wurde in webpack.base.conf mit einem Alias ​​festgelegt.
Vue von „vue“ importieren
App aus „./App“ importieren
Router aus „./router“ importieren
Store aus „./store“ importieren


Vue.config.productionTip = falsch
    /* eslint-deaktivieren Sie no-new */
neuer Vue({
    el: '#app',
    Router,
    //vuex muss zum Store hinzugefügt werden,
    Komponenten: { App },
    Vorlage: '<App/>'
})

Wir können auch den Status in main.js übernehmen und einen neuen store/state.js erstellen

Standard exportieren {
    Anzahl: 0
}

Dann kann index.js geändert werden in

//vuex verwendet import Vue von 'vue'
Vuex von „vuex“ importieren
Status aus „./state“ importieren

Vue.Verwenden(Vuex)

exportiere standardmäßig neuen Vuex.Store({
    Staat: Staat,
    //Statusänderungsmethode Mutationen: {
        //state ist der obige Status
        addData(Status) {
            //Zustand ändern state.count++
        }
    },
    //Filtergetter: {
        getState(Zustand) {
            wenn (Zustand.Anzahl >= 5) {
                Rückkehr 5
            } anders {
                Statusanzahl zurückgeben
            }
        }
    },
    Aktionen: {
        //Der Vorteil der aktionsgesteuerten Mutationsmethode ist die asynchrone Verarbeitung addData(context) {
            //Asynchron simulieren setTimeout(() => {
                Kontext.commit('Daten hinzufügen')
            }, 1000)
        }
    }
})

Zusammenfassen

Dies ist das Ende dieses Artikels über die Installation und Verwendung von Vuex für Vue-Anfänger. Weitere Informationen zur Installation und Verwendung von Vuex finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Die ausführlichste Zusammenfassung der Vuex-Einführung
  • Vuex-Schnellstart (leicht verständlich)
  • Vuex-Tutorial für die ersten Schritte
  • Einfache Vuex-Einführung in drei Schritten
  • Vuex-Tutorial für die ersten Schritte
  • Lernen Sie in wenigen Minuten die Anwendung von Vuex in Vue (Anfänger-Tutorial)
  • Einfache Einführung in Vuex
  • Vue.js Praktisches Vuex-Tutorial zum Einstieg
  • Erste Schritte mit Vuex

<<:  Implementierung von zwei Basis-Images für die Docker-Bereitstellung von Go

>>:  Schritte zum Ändern des MySQL-Datenbankdatendateipfads unter Linux

Artikel empfehlen

JS implementiert die zufällige Generierung von Bestätigungscodes

In diesem Artikelbeispiel wird der spezifische JS...

Detaillierte Erläuterung der MySQL-Filterreplikationsideen

Inhaltsverzeichnis MySQL gefilterte Replikation I...

Implementierung des Umschreibesprungs in Nginx

1. Neuer und alter Domain-Namenssprung Anwendungs...

...

Detaillierte Erklärung der regulären Ausdrücke von Nginx

Nginx (Engine x) ist ein leistungsstarker HTTP- u...

MySQL verwendet die Partitionsfunktion, um eine horizontale Partitionierungsstrategie zu implementieren

Inhaltsverzeichnis 1 Bewertung 2 Fünf Strategien ...

Fehlerbehebung bei hohem Speicherverbrauch von NodeJs, tatsächlicher Kampfrekord

Vorwort Dies ist eine Untersuchung, die durch die...

Beispiel für die Validierung eines JavaScript-Formulars

HTML-Formulare werden häufig verwendet, um Benutz...

CSS-Beispielcode zum Zeichnen eines Lutschers

Hintergrund: Machen Sie jeden Tag ein wenig Forts...

Detaillierte Erklärung der JQuery-Datagrid-Abfrage

Inhaltsverzeichnis Fügen Sie dem Tree-Element Cod...

Dieser Artikel entführt Sie in die Welt der js-Datentypen und Datenstrukturen

Inhaltsverzeichnis 1. Was ist dynamische Typisier...

Details zu MySQL-Zeittypen und -Modi

Inhaltsverzeichnis 1. MySQL-Zeittyp 2. Überprüfen...

Vuex kombiniert Sitzungsspeicherdaten, um das Problem des Datenverlusts beim Aktualisieren der Seite zu lösen

Inhaltsverzeichnis Vorwort 1. Gründe: 2. Lösungsi...

MySQL Master-Slave-Prinzip und Konfigurationsdetails

MySQL Master-Slave-Konfiguration und Prinzip, zu ...

Mehrere Möglichkeiten, die Lesbarkeit von Webseiten zu verbessern

1. Verwenden Sie kontrastierende Farben. Mit Kont...