如何使用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以非動態方式存儲集合？

回答

相關問題