Vuex中mutation为什么是同步的action为什么是异步

最近在回顾vue的相关知识点的时候，学习Vuex的时候，发现一个问题，为什么在Vuex中mutation是同步的，而action却是异步的呢？

一、 什么是Vuex

在了解mutation与action之前我们先了解一下什么是Vuex 以及Vuex的作用是什么？

官方文档这样解释：

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

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

Vuex有5个重要的概念

state：存储公共数据（相当于组件中的data）
mutations：修改数据方法的集合，必须是同步
getters：类似于computed计算属性(利用现有的状态进项计算得到新的数据---派生）
actions：异步操作
modules：模块化拆分

如上图所示：左边是我们vue的组件，虚线框内是vuex，里面有一个state就是我们要所需要的数据，我们现在要修改数据的话需要一定的流程：

1. 我们需要在组件里面调用dispatch() 方法提交Actions

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

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

4. 最后render到组件里面

actions与mutation包含的都是一些方法，但是不同的是actions不能直接修改数据，它的作用是提交mutations，mutation里面包含的才是具体操作数据的方法，在Vuex中是唯一一个能够修改数据的方法就是提交 mutation

二、mutations 与Actions的区别

经过上面的解说，我们知道mutation与action里面放的都是方法，但是mutation与action具体有哪些区别呢？

• 首先action与mutation都可以改变state中数据的状态，但是action可以处理异步函数可以在devtools中追踪数据变化，而mutation只可以处理同步函数，当处理异步函数的时候检测不到数据变化

那么是否有人好奇，为什么mutation进行异步操作的时候，为什么页面发生变化了，但是devtools中为什么检测不到数据的变化，而action为什么就可以呢？

下面我们就来探索一下：

为什么mutation必须是同步函数，actions 可以处理异步函数

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

如果我们在mutation中写了异步，commit在触发mutation事件时，异步的回调函数不知道是什么时候执行的，所以在devtools中难以追踪变化

actions 可以做异步操作，但是并不是直接修改数据，而是通过提交mutations 里面的方法

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就可以追踪到状态的变化