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

Question

Vuejs/Nuxtjs を使用してこのアプリケーションでアプリケーションを開発しています。Vuex ストレージ配列 identifiersArray を監視するコンポーネント IdentifiersNode.vue があります。プッシュや直接キー値の変更など、identifiersArray への直接の変更を監視できますが、identifiersArray 内のオブジェクトに新しいオブジェクトを追加すると、何らかの理由で監視が機能しなくなります。以下は私のIdentifiersNodeです

P粉846294303 · Answer

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

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

小さな例

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

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

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

%E が必要な場合

P粉561323975 · Answer

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

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

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

リーリー

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

リーリー

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