Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态(state)。
Action 可以包含任意异步操作。
在index.js中：
...
const state = {
count:1
}
const mutations = { //管理事件类型
add(state){
state.count += 1
},
reduce(state,step){
state.count -= step;
console.log(2)
}
}
const actions = { //提交事件，提mutations里的事件，可以在这里进行逻辑判断...操作
add({commit}){ //简化版写法
commit("add") //对应mutations里边的事件名
},
reduce(context,step){ //完整写法
console.log(1)
context.commit("reduce",step)
}
}
//当我点击➖时候，先执行actions，打印1；再执行mutations，打印2
export default new Vuex.Store({
state,
mutations,
actions
})
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。
在任意组件内：
<div>{{count}}</div>
<button @click="add()">+</button>
<button @click="reduce()">-</button>
computed:mapState(["count"]),
methods:{
reduce(){
this.$store.dispatch("reduce",2);
},
add(){
this.$store.dispatch("add")
},
// ...mapActions(['add','reduce'])
}
你在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用。
到此为止，上述的写法和直接使用mutations是一样效果，那为什么还需要actions呢？可以参考另一篇文章https://www.jianshu.com/writer#/notebooks/38257501/notes/51022648
image.png
组件中想要修改state的数据，通过dispatch调用actions，在acitons中通过commit调用mutations来修改数据
如果没有异步操作或者是批量处理可以直接通过commit调用mutations.
