1、流程顺序

“相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation。

2、角色定位

基于流程顺序，二者扮演不同的角色。

Mutation：专注于修改State，理论上是修改State的唯一途径。

Action：业务代码、异步请求。

3、限制

角色不同，二者有不同的限制。

Mutation：必须同步执行。

Action：可以异步，但不能直接操作State。

怎么调用来了看这里:

const mutations = {

[setState](state, value) {

state.xxx = value

}

}

此处value可以是对象,可以是值等

组件调用方式: this.$store.commit('setState', [value])

(2).ACTIONS

// 第一种写法简写形式

const actions = {

[addPlus]({commit}) { // 简写方式,待研究

commit('[setState]', value)

//此处value可以是对象,可以是固定值等

}

}

// 第二种形式

const actions = {

[addPlus](context) {

//context 官方给出的指定对象, 此处context可以理解为store对象

context.commit('[setState]', value)

}

}

/* 两处的commit都是提交的mutations中的字符串的事件类型名称,对应会调用mutations中的回调函数 */

actions在组件中的调用方式:

import mapActions from 'vuex'

methods: {

...mapActions: ([

'addPlus'

]),

setAddPlus () {

this.$store.dispatch('addPlus', [value]) // 异步调用mutations

}

}