Vuex Mutation未正确设置状态：控制台与DevTools显示不一致

我之前也碰到过类似的Vue DevTools和控制台日志不一致的坑，结合你的情况，给你几个可能的解决方向：

• 先排除DevTools的异步同步延迟
  Vue的状态更新是异步批量处理的，有时候控制台打印的是即时的内存状态，但DevTools还没来得及同步最新数据。你可以试试在赋值后用nextTick确认最终状态，或者手动刷新DevTools的状态面板：

  mutations: {
    SET_LOADED_BUILDINGS (state, payload) {
      console.log(payload)
      state.buildings = payload
      console.log(state.buildings)
      // 用nextTick确认最终同步后的状态
      this._vm.$nextTick(() => {
        console.log('最终状态:', state.buildings)
      })
    }
  }
  

• 检查数组对象的引用与可枚举性
  如果payload里的第二个对象是已有对象的引用，或者包含不可枚举属性，DevTools可能无法正确解析展示。可以尝试对payload做深拷贝后再赋值（注意如果对象里有函数、Symbol等特殊类型，JSON.parse(JSON.stringify())会失效，这时候可以用lodash的cloneDeep）：

  mutations: {
    SET_LOADED_BUILDINGS (state, payload) {
      console.log(payload)
      // 深拷贝消除引用问题
      state.buildings = JSON.parse(JSON.stringify(payload))
      console.log(state.buildings)
    }
  }
  

• 排查DevTools本身的问题
  旧版本的Vue DevTools偶尔会有显示bug，试试更新到最新版本，或者关闭DevTools面板后重新打开，甚至重启浏览器，很多时候这类显示异常都是缓存导致的。

• 确认是否有其他代码修改了状态
  检查项目中有没有其他Mutation、Action或者watch监听在调用SET_LOADED_BUILDINGS之后，立即对state.buildings做了过滤、截取等操作——控制台打印的是赋值瞬间的状态，但DevTools显示的是最终被修改后的结果。可以在所有可能修改该状态的地方添加日志排查。

内容的提问来源于stack exchange，提问作者Matt Campbell