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を使用せずにオブジェクトを変更するにはどうしたらいいですか？

• 第2に、特定の記事のコメントの状態を更新すると、comments(){ return this.$store.comments[this.articleId]; }のような計算されたプロパティを持つ記事のコメントを見ながら、他の記事のコメントも更新されますか？その場合は悪い実装ではないのですか？

• 最後に、コメントを保存する良い方法がありますか？

ありがとう！

Answer 1

1）pushの方法が反応的であるため、Vue.setは不要です。

あなたがここにArray反応性についての詳細を読むことができます：https://vuejs.org/v2/guide/list.html#ad

2）はあなたのコードに依存しますが、すべきではありません。しかし、私は、私はそれがあなたのバックエンドで右関係article -> comments願っています）

3（第3回参照）あなたの現在の実装comments -> articleが適切ではないと思います（IDKのは、かもしれウルプロジェクトは固有のものであり、それが必要）

です

だから、それはそれはちょうどいくつかのリファクタリングだモジュールArticleとComment

にお店を分割する方が良いでしょう開始するため、このarticle->comments

のようにそれを行うには、あなたのフロントエンドをリファクタリングする必要があります。 uはアーキテクチャのアドバイスのようなものが必要な場合は、uがより多くの情報だけでなく、出力\

Answer 2

Vuex変異

私の最初の質問はここで（オブジェクトの動作を変異来る方法であるいくつかの基本的なアクションのコードを提供する必要があります）Vue.setを使わずに？あなたがあなたの状態で宣言されたプロパティへの変更を行う際に意味

Mutations follow vue's reactivity rules

、それが修正されたVUEインスタンスのプロパティのように動作します。したがって、コードスニペットのコメントで言及したとおり、実際にはvue.setは必要ありません。コメントのように計算されたプロパティで、各記事のコメントを見ながら変異次に

によって影響

---

変更（）{これを返す$ store.comments [this.articleId]。 }特定の記事のコメントのコメント状態を更新すると、他の記事のコメントも更新されますか？その場合は悪い実装ではないのですか？

これをチェックすると、fiddleもコンソールを見ます。私がid = 0にコメントをプッシュすると、他のセットには何の変更も加えられていないことが時計から分かります。