VueJS：修改状态后 Vuex 不更新视图答案

【问题标题】：VueJS: Vuex doesn't update View after modifying StateVueJS：修改状态后 Vuex 不更新视图
【发布时间】：2017-07-31 02:26:11
【问题描述】：

我目前正在做一个网络项目。我使用 VueJS 2 和 Vuex 2。问题是当我更新状态的子数组时，状态没有绑定到视图。

我的州：

export const state = {
 comments: [],
}

和突变：

...
export const mutations = {
 ADD_REPLY (state, { id, comment }) {
  let c = state.comments.find((c) => c.id === step);
  if (c.replies === undefined)
   c.replies = [];
  c.replies.push(comment);
 }
}
...

在这个例子中，当我推送一个回复 (ADD_REPLY) 时，它不会在视图中更新。你有什么想法吗？

【问题讨论】：

见vuex.vuejs.org/en/…
@Phil 我试着像这样使用它Vue.set(c.replies, c.replies.length, comment); 但它不起作用
也许可以试试c.replies = c.replies.concat(comment)。
评论很好已经添加了，但是没有绑定到视图，仍然没有更新
这似乎是一个可变性问题。我觉得你将不得不做类似Vue.set(state.comments, indexOfTheComment, commentWithRepliesAdded)

标签： view vue.js state vuex

【解决方案1】：

根据documentation，您只需要在设置属性名称时担心反应性。在您的情况下，这将设置c.replies = [];。所以改用Vue.set(c, 'replies', []);

【讨论】：