Nuxtでstateの変更をcomponent側で検知できない場合の解決策

最終更新日:2020年5月31日 Nuxt

components内のあるvueファイルを通じて、storeのstateの値を変更したが、別のvueファイルにてstoreの変化をリアクティブに検知できない問題が発生した。

以下のように、experience-search.vueにてstoreのmutationを呼び出し、stockArticlesという配列にデータを追加した。

そして、stock-articles.vueのcomputedのobtainStockedArticlesにて、gettersを使ってstateのstockArticlesを呼び出す。

computedで、このstockArticlesを監視することで、データが追加されると、stock-articles.vue側でもリアクティブに変更を検知できると思っていたが、うまくいかない。

そこで、createdにて、最初にstockArticlesのシャローコピーをgettersで取得し、それをvue内のリアクティブな変数に代入しておく。

こうすることで、vue内のリアクティブな変数がstateの変化をキャッチできる(参照する)ため、experience-search.vueでstockArticlesにデータを追加すると、stock-articles.vue側の表示もリアクティブに切り替わる。

あとは、obtainStockedArticlesはcomputedでなはなく、methodsに記述した。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です