我已经设法打破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 （根级状态项）添加计算属性，然后将其包含在模板中，则会正确更新用户名 .
应用程序还有很多，但希望我对我所展示的内容做错了 .
任何帮助深表感谢！
UPDATE
经过8个小时的摔跤后，这个数字的答案似乎已经过去2分钟了 . （感谢@blockhead和@ bert-evans） .
我以为我已经检查了所有代码，但事实证明，第一次从后端服务器加载数据是错误的 . payload 是来自Web 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)
}
1 回答
问题确实是错误地将新密钥分配给现有的Vuex对象 . 使用
Vue.set的以下代码解决了该问题：