Vuejs/Nuxtjs の Watch では、Vuex ストアからのオブジェクト配列の変更を監視できません

Question

Vuejs/Nuxtjs を使用してアプリケーションを開発しています。 このアプリケーションには、Vuex ストレージ配列 identifiersArray を監視するコンポーネント IdentifiersNode.vue があります。 。

プッシュ、キー値の直接変更など、

identifiersArray への直接変更を確認できますが、identifiersArray 内のオブジェクトに新しいオブジェクトを追加すると、 watch が原因で

Answer 1

vuex を使用している場合は、mapGetters を使用してストアからアイテムを取得することをお勧めします。これにより、値が自動的に監視され、項目が変更されるたびに再レンダリングされます。

ドキュメントは次のとおりです: ドキュメント

小さな例

＃＃＃店＃＃＃ リーリー ＃＃＃成分＃＃＃ リーリー

以下はコードペンの例です:

https://codesandbox.io/s/vuex-store-forked-bl9rk0?file=/src/components/HelloWorld.vue

%E が必要な場合

Answer 2

回答を提供すると、将来他の人が役立つ可能性があります。

実際には、Vuex ストアの配列内の既存のオブジェクトにオブジェクトを追加しています。したがって、時計はその変化を認識できません。これを vue.set に変更したところ、これでうまくいきました。

以前は既存のオブジェクトに追加を使用していました:

リーリー

後で次のように変更しました:

リーリー

以下は私の Vue コンポーネントです。