如何以不动态的方式使用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状态时，使用comments(){ return this.$store.comments[this.articleId]; }等计算属性观察每篇文章的评论时，其他文章的评论还会更新吗？如果是这样，不是不好的实施吗？

• 终于有更好的方法来存储评论吗？

谢谢！

Answer 1

vuex突变

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

突变遵循Vue的反应性规则

这意味着，当您更改在您所在州声明的属性时，它的行为就像修改了VUE实例上的属性一样。因此，您确实不需要vue.set，正如您在代码段评论中提到的那样。

---

变化受突变影响

其次，在观察每篇文章中使用计算属性（例如comment（）{返回此。}当我们更新特定文章评论的评论状态时，其他文章的评论是否也会更新？如果是这样，不是不好的实施吗？

检查此小提琴，还要观看控制台。如果我将评论推向id = 0，手表会告诉您另一组从未对其进行任何更改。

Answer 2

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

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

2. 取决于您的代码，但不应该。但是我认为您当前的实施comments -> article不正确（请参阅3rd）

3. 我希望在您的后端中正确的关系article -> comments（IDK，可能是您的项目是特定的，是必要的）

因此，您确实需要重构前端才能像此article->comments

这样

为了开始，最好将商店分开在模块Article和Comment

上

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