Wozu dient Store in Vue?

In Vue wird der Store zum Verwalten des Status, zum Teilen von Daten und zum Verwalten des externen Status zwischen verschiedenen Komponenten verwendet. Der Store ist der Kern der Vuex-Anwendung, bei dem es sich um einen Container handelt, der den größten Teil des Status in der Anwendung enthält und den ändert Zustand im Store Die einzige Möglichkeit besteht darin, eine Mutation einzureichen.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue Version 2.9.6, DELL G3-Computer.

Was ist die Verwendung von Store in Vue?

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.

Der Kern jeder Vuex-Anwendung ist der Store (Lager). Ein „Store“ ist im Grunde ein Container, der den größten Teil des Status Ihrer Anwendung enthält. Es gibt zwei Unterschiede zwischen Vuex und einfachen globalen Objekten:

Der Zustandsspeicher von Vuex reagiert. Wenn eine Vue-Komponente den Status aus dem Store liest und sich der Status im Store ändert, wird die entsprechende Komponente entsprechend effizient aktualisiert.

Sie können den Status im Store nicht direkt ändern. Die einzige Möglichkeit, den Status im Speicher zu ändern, besteht darin, explizit eine Mutation zu begehen. Dies ermöglicht es uns, jede Zustandsänderung einfach zu verfolgen und einige Tools zu implementieren, die uns helfen, unsere Anwendung besser zu verstehen.

Das Kernkonzept von Store

state stellt den Status im Store dar, ähnlich dem Datenattribut in der Vue-Instanz.

Mutation

Die einzige Möglichkeit, den Status im Vuex-Store zu ändern, besteht 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 Zustandsänderungen vor und sie akzeptiert den Zustand als ersten Parameter.

Action

Action ähnelt der Mutation, mit der Ausnahme, dass

Action eine Mutation übermittelt, anstatt den Zustand direkt zu ändern.

Action kann jede asynchrone Operation enthalten.

Ein Beispiel

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Nutzung des Stores

Bevor Sie den Store verwenden, müssen Sie zunächst Vuex installieren:

npm install vuex

Lassen Sie uns nach der Installation von Vuex einen Store erstellen. Die Erstellung ist unkompliziert – stellen Sie einfach ein Anfangszustandsobjekt und einige Mutationen bereit.

Erstellen Sie einen neuen Store-Ordner und dann eine neue index.js-Datei:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state){
            state.count++;
        }
    }
})

Um auf diese.$store-Eigenschaft in der Vue-Komponente zuzugreifen, müssen Sie den erstellten Store für die Vue-Instanz bereitstellen. Vuex bietet einen Mechanismus zum „Injizieren“ des Speichers von der Stammkomponente in alle Unterkomponenten in Form von Speicheroptionen.

Das heißt, importieren Sie es in die Datei main.js und registrieren Sie es in der Vue-Stamminstanz:

import store from './store'
...
new Vue({
    el: "#app",
    store: store,
...

Dann können Sie es über store.commit('increment') unter dem Methodenattribut einer beliebigen Vue-Komponente aufrufen:

        ...
        methods:{
            increment:function(){
                this.$store.commit("increment");
                console.log(this.$store.state.count);
            },
            ...

Der Effekt ist wie folgt:

[Verwandte Empfehlung: „vue.js Tutorial“]

Das obige ist der detaillierte Inhalt vonWozu dient Store in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!