未分類

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

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に記述した。