Vuex 突变未正确设置状态

Question

我正在做一个 Vue/Vuex 项目，只是运行遇到了一个非常奇怪的问题。我有一个突变，我在将状态突变为有效负载之前和之后进行控制台日志记录，它显示了两个对象的数组。但是，状态仅显示数组中的第一个对象。这是我的突变：

mutations: {
  SET_LOADED_BUILDINGS (state, payload) {
    console.log(payload)
    state.buildings = payload
    console.log(state.buildings)
  }
}

console.log(payload) 输出两个对象的数组（我want/expect）并且console.log(state.buildings) 也输出相同的两个数组对象。但是，在 Vue Dev Tools 中，它只显示数组中的一个对象（第一个）。

Answer 1

它只在有效负载中显示一个对象而在 console.log 中显示两个对象的原因是异步问题。我正在使用 Array.push 将所有对象推送到数组中，并在它完成之前推送有效负载。我实现了一个承诺并使用 Promise.all 来确保 Array.push 在将状态设置为有效负载之前完成。

Answer 2

快速提醒一下，动作可以是异步的，突变不能是异步的。这个推理背后有一个逻辑，突变是数据突变的 "end" 点，数据更改之前和之后的日志跟踪捕获，您可以进入在数据准备好之前提交的场景（像这样）。 See: Mutations must be synchronous

Vuex Mutation Not Setting State Correctly