Vue面试题39：vuex中mutations和actions有何区别？（总结自B站up主‘前端杨村长’视频，仅供自用学习）

体验：
看下面的的例子："action"类似于"mutation"，不同在于：
- action提交的是mutation，而不具备直接修改状态的能力；
- action可以包含任意异步操作；

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    INCREMENT (state) {
      state.count++
    }
  },
  actions: {
    increment ({ commit }) {
      commit('INCREMENT')
    }
  }
})

答题思路
- 1.给出两者概念说明区别
- 2.举例说明应用场景
- 3.使用细节不同
- 4.简单阐述实现上差异
回答范例
- 1.官方文档说：更改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)，这样就很容易理解两者使用上的不同了；
简单的源码实现

class Store {
  constructor(options) {
    this.state = options.state
    this.options = options
  }
  commit(type, payload) {
    // commit传入的上下文和参数1都是state对象
    this.options.mutations[type].call(this.state, this.state, payload)
  }
  dispatch(type, payload) {
    this.options.actions[type].call(this, this, payload)
  }
}