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

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]; }，那么其他文章的评论是否也会更新？如果是这种情况，那么执行不好吗？如何使用Vuex以非动态方式存储集合？
最后是否有更好的方式来存储评论？

谢谢！

来源

2017-03-10 user3211198

当你第二次尝试时发生了什么？ –

@AmreshVenugopal按预期计算的工作 – user3211198

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

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

来源

2017-03-10 05:20:25 GONG

1）但正如你所看到的数组是在'comments：{}'对象 – user3211198

@ user3211198无所谓，vue注意'push'事件这里是完整列表的反应阵列上的操作https://vuejs.org/v2/guide/list.html#Array-Change-Detection – GONG

是否会更新所有其他文章的评论？ – user3211198

Vuex突变

我的第一个问题是怎么来的变异对象的作品（这里）不使用Vue.set？

Mutations follow vue's reactivity rules

当你改变你的状态声明的属性这意味着，它会像被修改的VUE实例的属性。所以你真的不需要你在代码片段注释中提到的vue.set。

受突变

变化而其次每篇文章有这样的评语一个计算属性（在观察评论）{返回此$ store.comments [this.articleId]。 }当我们更新特定文章评论的评论状态时，其他文章的评论是否也会更新？如果是这种情况，那么执行不好吗？

检查这个fiddle，也观看控制台。如果我将评论推送到id = 0，手表会告诉您另一套手表从未对其做过任何更改。

来源

2017-03-10 05:55:16

谢谢！小提琴清楚地表明事实并非如此 – user3211198

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

回答

相关问题