Einführung in die Verwendung von Store in Vuex (mit Beispielen)

Dieser Artikel bietet Ihnen eine Einführung in die Verwendung von Store in Vuex (mit Beispielen). Ich hoffe, dass er Ihnen als Referenz dienen wird.

1. Einführung in die Statusverwaltung (vuex)
​ ​ vuex ist ein Zustandsverwaltungsmodell, das speziell für vue.js-Anwendungen entwickelt wurde. Es verwendet einen zentralen Speicher, um den Status aller Komponenten der Anwendung zu verwalten, und stellt mithilfe entsprechender Regeln sicher, dass sich der Status auf vorhersehbare Weise ändert. Vuex integriert auch die offizielle Debugging-Tool-Erweiterung Devtools von Vue, die erweiterte Debugging-Funktionen wie konfigurationsfreies Zeitreise-Debugging, Status-Snapshot-Import und -Export usw. bietet.

2. Zustandsverwaltungskern
Zustandsverwaltung besteht aus 5 Kernen, nämlich Zustand, Getter, Mutation, Aktion und Modul. Stellen wir sie jeweils kurz vor:
1 Der Status ist ein einzelner Statusbaum. Im Status müssen wir die Arrays, Objekte, Zeichenfolgen usw. definieren, die wir verwalten müssen. Nur wenn sie hier definiert sind, kann der Status des von Ihnen definierten Objekts im Vue abgerufen werden. js-Komponente.
2. Getter
Getter ähnelt in gewisser Weise den berechneten Eigenschaften von vue.js. Wenn wir einen Zustand aus dem Zustand des Geschäfts ableiten müssen, müssen wir Getter als ersten Parameter verwenden, und der Rückgabewert von Getter wird darauf basieren Es wird zwischengespeichert und nur dann neu berechnet, wenn sich der Abhängigkeitswert im Getter (ein Wert im Status, der abgeleitet werden muss) ändert.
3. Mutation
Die einzige Möglichkeit, den Status im Speicher zu ändern, besteht darin, eine Mutation einzureichen, die einem Ereignis sehr ähnlich ist. Jede Mutation hat einen Ereignistyp vom Typ String und eine Rückruffunktion. Wenn wir den Wert von state ändern müssen, müssen wir ihn in der Rückruffunktion ändern. Wenn wir diese Rückruffunktion ausführen möchten, müssen wir eine entsprechende aufrufende Methode ausführen: store.commit.
4. Aktion
Die Aktion kann Mutationen übermitteln, store.commit kann in Aktion ausgeführt werden und es kann jede asynchrone Operation in Aktion sein. Wenn wir diese Aktion auf der Seite verwenden möchten, müssen wir store.dispatch
5, Modul
ausführen Das Modul löst das Problem tatsächlich nur, wenn der Zustand sehr komplex und aufgebläht ist. Das Modul kann den Speicher in Module unterteilen und jedes Modul hat seinen eigenen Zustand, seine eigene Mutation, seine eigene Aktion und seinen eigenen Getter.

3. Beispiel

1. Erstellen Sie zuerst eine store.js und führen Sie dann vuex ein

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const state = {   
userInfo: {}
}const mutations = {
    updateUserInfo(state, infos) {
        state.userInfo= infos
    }
}
export default new Vuex.Store({
    state,
    mutations
})

So eine einfache store.js ist fertig.

Wie nutzen wir diese etablierte Statusverwaltung in der Schnittstelle?

1. Daten festlegen (aktualisieren)

首先在script下引入store.js
<script>
import store from &#39;store.js的路径&#39;import { 
mapMutations 
} 
from &#39;vuex&#39;methods:{
    ...mapMutations([        
    &#39;updateUserInfo&#39;
    ])
}
</script>

Wo die Daten aktualisiert werden müssen, platzieren Sie die Daten werden aktualisiert

this.updateUserInfo(data)

2. Holen Sie sich die Daten, wo sie benötigt werden, in erstellten ||. gemounteten ||. Hinweis: Auch Daten können auf derselben Seite eingestellt und abgerufen werden

<script>
import store from &#39;store.js的路径&#39;import { 
mapState 
} 
from &#39;vuex&#39;computed: {
   ...mapState({
        userInfo: &#39;userInfo&#39;
   })
},
created() {
    console.log(this.userInfo)
}
</script>

Verwandte Empfehlungen:

Einfaches Vuex und Modularisierung lernen

Vue.js-vuex (Zustandsverwaltung)

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von Store in Vuex (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!