Vuex Mutation 未正确设置状态答案

【问题标题】：Vuex Mutation Not Setting State CorrectlyVuex Mutation 未正确设置状态
【发布时间】：2018-10-19 16:25:41
【问题描述】：

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

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

console.log(payload) 输出两个对象的数组（我想要/期望的），console.log(state.buildings) 也输出两个对象的相同数组。但是，在 Vue 开发工具中，它只显示数组中的一个对象（第一个）。

【问题讨论】：

你的 state.buildings 的初始值是多少？
我的 state.buildings 被初始化为一个空数组——buildings: [] 但是，我想我可能已经发现了问题所在。我认为我必须异步加载我的数组。我现在正在调查。
你能展示一下你是如何使用state.payload的吗？

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：