課題
vuexのstateオブジェクトを更新したが画面に反映されない。
とりあえず現状のオブジェクトの内容で画面を更新したい。
注意
stateオブジェクトの更新が反映されなくなったら、まず最初にオブジェクトの構成が変わってしまっていることを 疑うべし。最初に生成したstateとAPIのレスポンスをそのまま突っ込んでいる場合、ネストしたオブジェクトのプロパティの数が 違っていたりすると変更を検知してくれない。してくれないどころか、 その構造のずれに気づかないでいると他の処理にまで悪影響が及ぶようになるので注意が必要。
対応
本来はちゃんと再描画されるような更新の仕方が必要なのだけど、
どうにも上手くいかない。工数的にも時間が足りない。というケースでの応急処置。
コードは参考サイトのものをほぼそのまま採用。
コンポーネントのルート要素にkeyを定義する
<template> <div :key="componentKey"> </div> </template>
再描画したいタイミングで keyを更新する
keyの値が更新された時点で小ビューの再描画が行われるので stateオブジェクトの状態が反映されることになる。
methods: {
forceRerender() {
this.componentKey += 1
}
}
おまけ
完全に諦めて上記方法で実装して終わりにしようと思ったところ、
最後の最後についに問題を解決。助かった...。
