VueJS、Vuex 和复杂状态

Question

由于（我认为）复杂的数据模型，我已经成功地打破了 VueJS 与我的 Vuex 商店的反应。数据是对象数组的对象，如下所示：

"users": { 
  "2017": [
    { id: 1, name: "bob" },
    { id: 2, name: "jane" },
  ],
  "2016": [ 
    ...
  ]
},
"dude": null

我最初在商店中存储 ES6 类（我有很多辅助函数）但后来删除了它。

为了访问正确的用户，我计算了属性如下：

  computed: {
    user () {
      return this.$store.state.users.users[this.$store.state.users.currentDate][this.$store.state.users.currentUserIndex]
    },
    ...

当我提交更改以更新名称时出现问题（例如），我可以在 Chrome Vue 调试器中看到状态已更改但模板没有（即 user.name 仍然是以前的名字）。

这里是突变的代码：

  PATCH_USER (state, payload) {
    let index = state.users[state.currentDate].findIndex((el) => el.id === payload.user.id)
    let user = Object.assign(state.users[state.currentDate][index], payload.user)
    Vue.set(state.users[state.currentDate], index, user)
  },

现在，让我觉得我在做一些愚蠢的事情的那部分。如果我为 dude（根级别状态项）添加计算属性，然后将其包含在模板中，则用户名会正确更新。

该应用程序还有很多内容，但希望我展示的内容有误。

非常感谢任何帮助！

更新

经过 8 小时的努力，答案似乎在发布到 SO 后的 2 分钟内就出现了。（感谢@blockhead 和@bert-evans）。

我以为我已经为此检查了所有代码，但事实证明第一次从后端服务器加载数据是错误的。 payload 是来自网络的响应 API:

// bad 
SET_USERS (state, payload) {
  state.users[state.currentDate] = payload.users
}

// good
SET_USERS (state, payload) {
  Vue.set(state.users, state.currentDate, payload.users)
}

Answer 1

问题确实是错误地将新密钥分配给现有 Vuex 对象。使用 Vue.set 的以下代码解决了该问题：

SET_USERS (state, payload) {
  // object, key, value
  Vue.set(state.users, state.currentDate, payload.users)
}

VueJS、Vuex 和复杂状态

VueJS, Vuex and complex state

vue.js

vuex