1、流程顺序
“相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation。
2、角色定位
基于流程顺序，二者扮演不同的角色。
Mutation：专注于修改State，理论上是修改State的唯一途径。
Action：业务代码、异步请求。
3、限制
角色不同，二者有不同的限制。
Mutation：必须同步执行。
Action：可以异步，但不能直接操作State。
怎么调用来了看这里:
const mutations = {
[setState](state, value) {
state.xxx = value
}
}
此处value可以是对象,可以是值等
组件调用方式: this.$mit('setState', [value])
(2).ACTIONS
// 第一种写法简写形式
const actions = {
[addPlus]({commit}) { // 简写方式,待研究
commit('[setState]', value)
//此处value可以是对象,可以是固定值等
}
}
// 第二种形式
const actions = {
[addPlus](context) {
//context 官方给出的指定对象, 此处context可以理解为store对象
mit('[setState]', value)
}
}
/* 两处的commit都是提交的mutations中的字符串的事件类型名称,对应会调用mutations中的回调函数 */
actions在组件中的调用方式:
import mapActions from 'vuex'
methods: {
...mapActions: ([
'addPlus'
]),
setAddPlus () {
this.$store.dispatch('addPlus', [value]) // 异步调用mutations
}
}
