vuex中为什么mutation中不能是异步的？

1.vuex是什么？

Vuex是一个专为Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex是一个状态集中管理器，解决多组件之间的数据通信，数据是可预测的（响应式的）。

 注：5个重要知识点：

• state：存储公共数据（相当于组件中的data）；

• mutations：修改数据方法的集合，必须是同步；

• getters：类似于computed计算属性(利用现有的状态进项计算得到新的数据——派生）；

• actions：异步操作；

• modules：模块化拆分；

 修改数据的流程：

1. 在组件里面调用dispatch() 方法提交Actions；

2. Actions 再通过commit方法提交mutations；

3. 再通过mutations 里面的方法修改state（数据）；

4. render到组件里面；

 2.mutation、action是什么？

（1）mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

 （2）action

类似于 mutation；

 不同在于：

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

 3.为什么mutation中不能是异步的？

vuex中所有的状态更新的唯一途径都是mutation，异步操作通过 Action 来提交 mutation实现，这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。

mutations:{
   someMutation (state) {
      api.callAsyncMethod(() => {
        state.count++
       })
   }
}

actions: {
  setStoreData ({ commit }) {
    mockData().then((res)=>{
    commit('storeData',res)
      })
    }
},
 
mutations:{
 storeData(state,payload){
    state.data = state.data.concat(payload)
   }
}

页面中触发actions

methods:{
    handleData(){
        this.$store.dispatch('setStoreData')
    }
}

 因此，devetools就可以追踪到状态的变化。

注：如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。