Мутация Vuex не устанавливает состояние правильно

Question

Я работаю над проектом Vue / Vuex и столкнулся с очень странной проблемой. У меня есть мутация, когда я веду консольный журнал до и после преобразования состояния в полезную нагрузку, и он показывает массив из двух объектов. Тем не менее, состояние показывает только первый объект в массиве. Вот моя мутация:

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

console.log (полезная нагрузка) выводит массив из двух объектов (что я хочу / ожидаю), а console.log (state.buildings) также выводит тот же массив из двух объектов. Однако в Vue Dev Tools он показывает только один объект (первый) в массиве.

Answer 1

Просто быстрое напоминание, действия МОГУТ быть асинхронными, мутации НЕ МОГУТ быть асинхронными. Существует логика, лежащая в основе этих рассуждений: мутации являются «конечной» точкой вашей мутации, когда запись трассировки журнала до и после изменения данных вы можете получить в сценарии (подобном этому), где вы фиксируете данные до того, как данные будут готовы. См .: Мутации должны быть синхронными

Answer 2

Причина, по которой он отображал только один объект в полезной нагрузке, а два в console.log, связана с асинхронной проблемой. Я использовал Array.push, чтобы поместить все объекты в массив, и передавал полезную нагрузку до ее завершения. Я реализовал обещание и использовал Promise.all, чтобы убедиться, что Array.push завершил работу, прежде чем устанавливать состояние в полезную нагрузку.