Vue.js 3 と Pinia Getters に関する問題

Question

私は Angular から Vue.js に切り替えて、そのアーキテクチャを理解しようとしています。現在、基本的な問題に直面しており、多くの回避策を使用していますが、実際には一時的な解決策しか考えていません。

ここでの主な問題は、Vue.js 3 と Pinia のコラボレーションです。 Pinia は Store、Getter、Action で構成されます。場合によっては、ストア内に非常にネストされたオブジェクトがあり、そのオブジェクトの特定の部分だけが必要になることがあります。たとえば、オブジェクトの必要な部分だけを出力するために、このためのゲッターを作成すると完璧です。

しかし、オブジェクトのこれらの部分をテンプレートから正確に変更したい場合はどうすればよいでしょうか?私の願いは、ストア内のデータも変更されることです。ただし、ゲッターは読み取り専用であるため、これは不可能です。

ここからどうやって進めばいいですか?

もちろん、私の説明を強調するために、いくつかの練習を伴う例を示したいと思います。

リーリー

ここでは非常にネストされたオブジェクト roles を使用してストアを作成しています。 v-for テンプレートで使用しているゲッター getElementsForCurrentRole では、特定の要素のみが必要です。

誰もが理解しやすいように、テンプレート コードもここに投稿します:

リーリー

ドキュメントで説明されている storeToRefs 関数を使用した後、getElementsForCurrentRole ゲッターをループしてデータをリアクティブにしました。私の問題は、データが部分的にしか反応しない可能性があることです。たとえば、Switch 要素の値を変更すると、ストアは正常に更新されます。これは機能します。ただし、ループしている配列の順序にアクセスできないようです。ドラッグ アンド ドロップで順序を変更するとすぐに、次のメッセージが表示されます: 書き込み操作に失敗しました: 計算された値は読み取り専用です。

これは理解できません、理解できません。

回避策として、現在、イベントに基づいてドラッグ後の配列内のレコードの新旧のインデックスを計算し、ストレージを手動で更新しています。しかし、それがその背後にある目的ではありません。私はアーキテクチャに関して根本的に何かを誤解しているのでしょうか?このような状況にどう対処すればよいでしょうか？

Answer 1

ゲッターを使用しています。 Getter は読み取り専用のプロパティです。 pinia ストアの値を更新するには、アクションを作成する必要があります。 そして、値が変更されたときにバインドして書き込む v-model を使用しています。したがって、ゲッターを使用して読み取ることはできますが、書き込むことはできません。あなたの状況にはいくつかの可能性が考えられます。その 1 つは、計算されたプロパティと演算の作成です。このような＃＃＃ リーリー

およびコンポーネント内の計算されたプロパティ:

リーリー