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

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

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

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

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

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

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

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

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

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