Die fünf Attribute von vuex sind: 1. Statusattribut, das zum Speichern von Variablen verwendet wird; 2. Getters-Attribut, das dem berechneten Attribut des Status entspricht; 4. Aktionsattribut; Moduleigenschaften für modulares Vuex.
Empfehlung: „vue Tutorial“
Die fünf Attribute und die grundlegende Verwendung von Vuex in Vue
VueX ist ein Zustandsverwaltungsframework, das speziell für Vue.js-Anwendungen entwickelt wurde und deren Verwaltung und Wartung einheitlich ist Der veränderbare Status der Vue-Komponente (Sie können ihn als einige Daten in der Vue-Komponente verstehen).
Vuex hat fünf Kernkonzepte:
state,getters,mutations,actions,modules.
1. Zustand: Grunddaten von Vuex, die zum Speichern von Variablen verwendet werden Ist synchron (wenn Sie die Aktion asynchron verwenden müssen). Jede Mutation verfügt über einen String-Ereignistyp (Typ) und eine Rückruffunktion (Handler).
Mit der Rückruffunktion ändern wir tatsächlich den Status. Sie akzeptiert den Status als ersten Parameter und übermittelt die Nutzlast als zweiten Parameter.
4. Die Funktion ist ungefähr die gleiche wie bei der Mutation. Der Unterschied besteht darin, dass die Aktion eine Mutation übermittelt, anstatt den Zustand direkt zu ändern. 2. Aktion kann jede asynchrone Operation enthalten.
5. Module: Modulares Vuex ermöglicht es jedem Modul, seinen eigenen Status, seine eigene Mutation, seine eigene Aktion und seine eigenen Getter zu haben, wodurch die Struktur sehr klar und einfach zu verwalten ist.
Verwendung von Vuex:
Erstellen Sie ein neues Vue-Projekt testApp ==》 Erstellen Sie die Store-Datei in der testApp ==》 Unter der Store-Datei befinden sich der Modulordner und getter.js und index.js ==》 Erstellen Sie user.js unter der Store-Datei
Eingeführt in main.js des Projektimportspeichers aus „./store“
Eingeführt in index.js unter der Store-Datei
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import global from './modules/global'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
user
},
getters
})
export default store
在store文件下的getters.js中引入
const getters = {
self: state => state.user.self,
token: state => state.user.token,
currentCommunity: (state, getters) => {
let cid = getters.currentCommunityId
return getters.communities.filter(item => {
return item.communityId === cid
})
}
}
export default getters
在modules文件下的user.js写代码
const user = {
state:{
self: null,
token: '',
},
mutations:{
SET_SELF: (state, self) => {
state.self = self
},
SET_TOKEN: (state, token) => {
state.token = token
}
},
actions:{
login ({ commit }, res) {
commit('SET_SELF', res.self)
commit('SET_TOKEN', res.token
}
}
export default userVerwenden Sie die folgenden zwei Methoden zum Speichern von Daten:
dispatch：异步操作，写法： this.$store.dispatch('mutations方法名',值) commit：同步操作，写法：this.$store.commit('mutations方法名',值)
Das obige ist der detaillierte Inhalt vonWas sind die fünf Attribute von Vuex?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
