如何以非动态方式使用 Vuex 存储集合？

Question

new Vuex.Store({
   state: {
     comments: {
         //store comments collection of each article 
         /* articleId: [...commentsCollection] */
     },
     articles: {
       ids: [],
       collection: []
     }
   },
   mutations: {
     //add a comment to comments collection of an article
     ADD_COMMENT(state, comment){
       state.comments[comment.articleId].push(comment);
       //I'm not sure if below line is needed (it works without it tho)
       Vue.set(state.comments, comment.articleId, state.comments[comment.articleId]);
     }
   }
});

• 我的第一个问题是如何在不使用 Vue.set 的情况下改变对象（此处）？

• 其次，当我们用comments(){ return this.$store.comments[this.articleId]; } 这样的计算属性观察每篇文章中的cmets 时，当我们更新特定文章的cmets 的comments 状态时，其他文章的cmets 是否也会更新？如果是这种情况，是不是不好的实施？

• 终于有更好的存储cmets的方法了吗？

谢谢！

Answer 1

Vuex 突变

我的第一个问题是如何在不使用 Vue.set 的情况下改变对象（此处）？

Mutations follow vue's reactivity rules

这意味着当您更改在您的状态中声明的属性时，它的行为就像 vue 实例上的属性被修改一样。所以你真的不需要你在代码 sn-p cmets 中提到的vue.set。

---

受突变影响的变化

其次，使用计算属性（如 cmets(){ return this.$store.cmets[this.articleId]; ）观察每篇文章中的 cmets当我们更新特定文章的 cmets 的 cmets 状态时，其他文章的 cmets 是否也会更新？如果是这样，是不是不好实施？

查看fiddle，同时查看控制台。如果我将评论推送到id = 0，手表会告诉您另一组从未对其进行任何更改。

Answer 2

1)您不需要Vue.set，因为push 方法是反应式的。

您可以在此处阅读有关 Array 反应性的更多信息：https://vuejs.org/v2/guide/list.html#ad

2) 取决于您的代码，但不应该。但我认为您当前的实现comments -> article 不正确（见第 3 条）

3) 我希望你的后端是正确的关系article -> comments（idk，可能是你的项目是特定的，这是必要的）

所以你确实需要重构你的前端来做到这一点article->comments

首先，最好将您的商店拆分为 Article 和 Comment 模块

这只是一些重构。如果您需要某种架构建议，那么您需要提供更多信息，而不仅仅是输出\一些基本操作代码