- state:存储状态(变量)
- getters:对数据获取之前的再次编译,可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
- mutations:修改状态,并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
- actions:异步操作。在组件中使用是$store.dispath('')
- modules:store的子模块,为了开发大型项目,方便状态管理而使用的。这里我们就不解释了,用起来和上面的一样。
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
const mutations = {
mutationsAddCount (state, n = 0) {
debugger
state.unm2 = (state.unm2 + n)
}
}
const actions = {
actionAddCount (state, n = 0) {
// state.unm2 = state.unm2 + n
this.commit('mutationsAddCount', n)
}
}
const getters = {
gettersAddCount (state) {
return (state.unm2 + 10)
}
}
export default new vuex.Store({
state: {
unm2: 10
},
mutations,
actions,
getters
})
mounted () {
this.$store.commit('mutationsAddCount', 19)
this.$store.dispatch('actionAddCount', 10)}
<h1>state num:{{$store.state.unm2}}</h1>
<h1>state num:{{$store.getters.gettersAddCount}}</h1>