Vuex突变未正确设置状态

时间:2018-05-09 13:58:34

标签: vue.js state vuex mutation

我正在研究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 Dev Tools中,它只显示数组中的一个对象(第一个)。

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

快速提醒一下,动作可能是异步的,突变也可能是异步的。这种推理背后有一种逻辑,突变是数据更改前后日志跟踪捕获的数据突变的“终点”,您可以进入在数据准备好之前提交的场景(如下所示)。 See: Mutations must be synchronous