vuex在mutations中定义的方法，还要在actions中再定义相同的方法来调用mutaions的方法吗？

Question

由于自己在日常开发中，使用vuex 时，直接在mutations中定义方法，然后在.vue中直接使用。但是目前发现有些人会在actions中再定义一个方法进行调用。

目前actions和mutations只是存在同异步的区别。

code地址

const mutations = {
  TOGGLE_SIDEBAR: state => {
    state.sidebar.opened = !state.sidebar.opened
    state.sidebar.withoutAnimation = false
    if (state.sidebar.opened) {
      Cookies.set('sidebarStatus', 1)
    } else {
      Cookies.set('sidebarStatus', 0)
    }
  },
  CLOSE_SIDEBAR: (state, withoutAnimation) => {
    Cookies.set('sidebarStatus', 0)
    state.sidebar.opened = false
    state.sidebar.withoutAnimation = withoutAnimation
  },
  TOGGLE_DEVICE: (state, device) => {
    state.device = device
  },
  SET_SIZE: (state, size) => {
    state.size = size
    Cookies.set('size', size)
  }
}
const actions = {
  toggleSideBar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },
  closeSideBar({ commit }, { withoutAnimation }) {
    commit('CLOSE_SIDEBAR', withoutAnimation)
  },
  toggleDevice({ commit }, device) {
    commit('TOGGLE_DEVICE', device)
  },
  setSize({ commit }, size) {
    commit('SET_SIZE', size)
  }
}

类似这段代码，其实actions中，只是单纯调用了一下mutations的方法，也没有做其他的操作。

目前github上比较火的vue项目。

• vue-element-admin

  使用方式如上

• vue2-elm

  直接使用mutaions的方法，无需在actions再进行调用

分别采用不同的方式，这些有什么区别吗？
个人不太认同第一种方式，显得很累赘，特别是重度依赖vuex时，相当于每次都要把mutaions的方法在actions再进行定义一遍。

还望各位道友解答一二

Answer 1

首先从Vuex文档中，你能了解到这两个的作用区别：

1、角色定位

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

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

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

2、限制

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

Mutation：必须同步执行。

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

了解到上面两点，那是不是就一定的按照这种模式来呢？其实不然，我们同样可以在Action中直接提交state，同样可以在Mutation中有异步操作，最后要的效果当然能达到预期，但是为什么就没有推荐这样做来？为什么一定要有这样的规定限制了？

个人觉得，还是一个规范和解决副作用问题。就如文档中说的：

mutation 必须是同步函数
我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

当然，以规范来编写代码，更助于团队的协作开发。