vuex中mutations为什么要写成同步方法？

首先说明：你要写成异步也可以，没人拦着你，除了调试有点问题，其他暂无发现。

为什么要同步？

原因： 使用devtools调试的时候会有问题。就是这么一句话，简单粗暴？有其他原因请留言狠狠的打脸，感恩大佬。

有什么问题？

调试环境下：使用setTimeout模仿异步，注意看mutations里面的代码：

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

let Store = new Vuex.Store({

  state: { // 仓库

    userInfo: {

      name: 'Test'

    }

  },

  getters: { // 监听state里面某个属性的变化，类似computed属性

    getUserInfo (state) {

      // state.userInfo.name = 666 // 不能在此改变state中的数据，不会报错，但是无效

      return state.userInfo

    }

  },

  // // 只能在这里才能改变state里面的数据，mutations必须是同步函数。原因是在mutation中混合异步调用会导致程序很难调试。用devtools很难追踪状态的改变。所以就定义了一个actions专门进行异步的处理。

  mutations: {

    handleUserName (state, newValue) {

      setTimeout(() => {

        state.userInfo.name = newValue

      }, 1000)

    }

  },

  actions: {

    changeUserName (context, newValue) { // context: 上下文

      setTimeout(() => {

        console.log(context, newValue)

        context.commit('handleUserName', newValue)

      }, 1000)

    }

  }

})

export default Store

此时commit一个handleUserName尝试下会发生什么？

这是未点击之前的

点击后

异步的mutations点击后

为什么state未改变？

原因是在mutation中混合异步调用会导致程序很难调试。用devtools很难追踪状态的改变。所以就定义了一个actions专门进行异步的处理。

将mutations中的代码改成同步方法再测试下：

  mutations: {

    handleUserName (state, newValue) {

      // setTimeout(() => {

        state.userInfo.name = newValue

      // }, 1000)

    }

  }

同步的mutations点击后

如果还有其他原因导致的mutations必须同步，跪求大佬告知，感恩不尽。