mutation的类型
2017-04-26 本文已影响6人
乖乖果效36
vuex的文档,我反反复复,在不同的时期读了很多遍,每一遍都会有一些不同的理解,开始读一下,可以写一些简单的项目,但是总是知其然而不知其所以然的样子,可以做出一些功能,但是很多细节不清楚为什么那么些,终于,要改一些东西的时候,还是躲不掉,比如说,在mutation和action这里,总是有一些纠结的点,读不懂,比如说对于mutation的类型,翻遍各种资料,终于明白了。
这里我们可以举一个简单的项目作为例子,当点击+1按钮的时候,count 加1,点击-1按钮的时候,count 减1.
mutation
The only way to actually change state in a Vuex store is by committing a mutation, 在vue 中,只有mutation 才能改变state. mutation 类似事件,每一个mutation都有一个类型和一个处理函数,因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字,action去comit 一个mutation, 它要指定去commit哪个mutation, 所以mutation至少需要一个名字,commit mutation 之后, 要做什么事情,那就需要给它指定一个处理函数, 类型(名字) + 处理函数就构成了mutation. 现在store.js添加mutation.
const store = new Vuex.Store({
state: {
count:0
},
mutations: {
// 加1
increment(state) {
state.count++;
},
// 减1
decrement(state) {
state.count--
}
}
})
Vue 建议我们mutation 类型用大写常量表示,修改一下,把mutation 类型改为大写
mutations: {
// 加1
INCREMENT(state) {
state.count++;
},
// 减1
DECREMENT(state) {
state.count--
}
}