Heim >Web-Frontend >View.js >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 ist ein Zustandsverwaltungstool für Vue, um es für mehrere Komponenten bequemer zu machen, den Zustand zu teilen. [Verwandte Empfehlung: „vue.js Tutorial“]
npm install vuex --save复制代码
import Vue from 'vue';import Vuex from 'vuex'; Vue.use(Vuex);const store = new Vuex.Store({ state: { count: 0 } })new Vue({ store, })
Ein einzelner Zustandsbaum, der ein Objekt verwendet, um alle Zustände auf Anwendungsebene zu enthalten.
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.
1832d1c4a53e5db59fd2eed60b317a8f {{ $store.state.count }}16b28748ea4df4d9c2150843fecfba68复制代码
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 }), },
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; } }
Getter wird als store.getters-Objekt verfügbar gemacht: this.$store.getters.doubleCount
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);
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!