vuex中actions和mutations有什么区别?

mutations和actions的区别

mutations和actions是vuex带来的两个独特的概念。新手程序员容易混淆，所以面试官喜欢问。 我们只需记住修改状态只能是mutations，actions只能通过提交 mutation修改状态即可。

看下面例子可知，Action类似于mutation`，不同在于:

• Action提交的是mutation，而不是直接变更状态。
• Action可以包含任意异步操作。

 const store = createStore({
        state: {
          count: 0,
        },
        mutations: {
          increment(state) {
            state.count++
          },
        },
        actions: {
          increment(context) {
            context.commit("increment")
          },
        },
  })

官方文档说:

更改 Vuex 的 store 中的状态的唯一方法是提交mutation， mutation非常类似于事件:每个mutation都有一个字符串的类型(type)和一个回调函数(handler)。Action类似于mutation，不同在于:Action可以包含任意异步操作，但它不能修改状态，需要提交mutation才能变更状态。

2.因此，开发时，包含异步操作或者复杂业务组合时使用action;需要直接修改状态则提交mutation。但由于dispatch和commit是两个API，容易引起混淆，实践中也会采用统一使用dispatch action的方式。

3.调用dispatch和commit两个API时几乎完全一样，但是定义两者时却不甚相同，mutation的回调函数接收参数是state对象。action则是与Store实例具有相同方法和属性的上下文context对象，因此一般会解构它为{commit，dispatch，state}，从而方便编码。另外dispatch会返回Promise实例便于处理内部异步结 果。

4实现上commit(type)方法相当于调用options.mutations[type](state);dispatch(type)方法相当于调用options.actions[type](store)，这样就很容易理解两者使用上的不同了。