web-dev-qa-db-ja.com

複雑なオブジェクトに対するVuexのベストプラクティス

私のVuexストアには、さまざまな複雑さのオブジェクトが含まれています。ネストされたオブジェクトを持つものもあれば、ネストオブジェクトの配列を持つものもあります。

次の行に沿って指定されたプロパティを変更するジェネリック関数を作成できます。

setProperty(state,{ type, id, prop, value })
{
  state[type][id][prop] = value;
}

しかし、ネストされたオブジェクト、オブジェクトの配列では、すぐに複雑になります。また、ネストされているかどうかに関係なく、すべてのオブジェクトプロパティにミューテーションを作成する必要があるのは非常に面倒なようです。

オブジェクト、ネストされたオブジェクト、配列などを変更するためのミューテーションを作成するためのベストプラクティスは何ですか？

もう1つの関連する問題は、状態でオブジェクトを検索するのではなく、オブジェクトをミューテーションに渡すのは悪い形式と見なされることです。

setProperty(state,{ obj, prop, value })
{
  obj[prop] = value;
}
vuex
13
Hilo

一般的に言えば、最初からネストされた状態構造を回避できれば最善です。データがどのように構造化されているかはわかりませんが、それらのオブジェクトまたはオブジェクトの領域の間に関係があるためにそうしている場合は、状態の形状を正規化してみる価値があるかもしれません。

これがReduxの作者からの良い記事です。 Reduxについて話していますが、コアコンセプトはVuexでもまったく同じです。 https://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html

そして Vues ORM は、それを自動的に行うライブラリです。

6
Kia Ishii