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和复杂状态

1 个答案: