Erfahren Sie mehr über State und Getter in Vuex

Die inneren Organe von Vuex bestehen aus fünf Teilen: Zustand, Getter, Mutation, Aktion und Modul. Dieser Artikel wird Ihnen zunächst ein umfassendes Verständnis von State und Getter in Vuex vermitteln. Ich hoffe, er wird Ihnen hilfreich sein!

Vuex_State

Vuex ist ein Zustandsverwaltungstool für Vue, um es für mehrere Komponenten bequemer zu machen, den Zustand zu teilen. [Verwandte Empfehlung: „vue.js Tutorial“]

Installieren

npm install vuex --save复制代码

Verwenden

import Vue from 'vue';import Vuex from 'vuex';

Vue.use(Vuex);const store = new Vuex.Store({  state: {    count: 0
  }
})new Vue({
  store,
})

State

Ein einzelner Zustandsbaum, der ein Objekt verwendet, um alle Zustände auf Anwendungsebene zu enthalten.

Vuex-Status in Vue-Komponente abrufen

Vuex bietet einen Mechanismus zum „Injizieren“ des Status von der Komponente in jede Unterkomponente über die Store-Option (Aufruf von Vue.use(Vuex)).

Durch die Registrierung der Store-Option in der Root-Instanz wird die Store-Instanz in alle Unterkomponenten unter der Root-Komponente eingefügt, und auf die Unterkomponenten kann über diesen $store zugegriffen werden.

<div class="home">
  {{ $store.state.count }}</div>复制代码

mapState-Hilfsfunktion

Wenn eine Komponente mehrere Zustände erhalten muss, ist die Deklaration dieser Zustände als berechnete Eigenschaften etwas repetitiv und überflüssig. Um dieses Problem zu lösen, können wir die Hilfsfunktion „mapState“ verwenden, um berechnete Eigenschaften zu generieren:

import { mapState } from 'vuex';

computed: {
  ...mapState(['count']),
},

Verwenden Sie andere Namen:

computed: {
  ...mapState({
    storeCount: state => state.count,
     // 简写
    storeCount: 'count',  // 等同于 state => state.count
  }),
},

Vuex_Getter

Stores berechnete Eigenschaften. Der Rückgabewert des Getters wird entsprechend seinen Abhängigkeiten zwischengespeichert und nur dann neu berechnet, wenn sich seine Abhängigkeitswerte ändern.

Getter empfängt den Status als ersten Parameter und Getter als zweiten Parameter.

getters: {
  doubleCount (state) {    return state.count * 2;
  }
}

Zugriff über Attribute

Getter wird als store.getters-Objekt verfügbar gemacht: this.$store.getters.doubleCount

Zugriff über Methoden

Sie können den Getter auch eine Funktion zurückgeben lassen, um Parameter an den Getter zu übergeben

getters: {
  addCount: state => num => state.count + num;
}

this.$store.addCount(3);

mapGetters-Hilfsfunktion

import { mapsGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'doubleCount',
      'addCount',
    ])
  }
}

Wenn Sie einer Getter-Eigenschaft einen anderen Namen geben möchten, verwenden Sie die Objektform:

mapGetters({
   // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount` 
  storeDoubleCount: 'doubleCount'
})

Weitere Programmierkenntnisse finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über State und Getter in Vuex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!