Vue.jsでうまくリアクティブされないからVuexを使った

教材開発について,Vue.js(Nuxt) で進めていますが,コンポーネントにもたせた変数の変更を,Vue側がうまいこと検知してくれません。そのため,値が変わっても表示側が更新されないというところで,長いこと躓いていました。

あらかたググったのですが解決策は見つからず。
取り急ぎ解決した方法として,コンポーネントに変数を持たせるのではなく,Store(Vuex)に持たせることで,その変数を変更・監視させるようにしたら,描画もスムーズに更新されるようになりました。

変数を更新している箇所ですが,mounted()で呼び出している関数にて,setIntervalでまた別の関数を呼び出し,その中でコンポーネント内の変数を更新させていました。しかし,その変更をVueは検知してくれません。vm.setやら色々試したのですが,どれもうまくいかず。仕方ないので,Storeで統一して管理することに。ややこしい。


11月は災難な月でした。
そのことについて,色々と書こうか迷ったのですが,書きません。面倒なことは嫌です。

前を向いて,論文執筆のため,教材開発をつづけます。


 カテゴリ一覧

 雑談(171)
アニメ(19)/ゲーム(12)/ドラマ(3)/パソコン(36)/小説(3)/広島東洋カープ(16)/映画(11)/漫画(33)/音楽(61)
 製作記(89)
AI(4)/CakePHP(3)/CentOS(4)/JavaScript(JS)(9)/Nuxt.js(4)/Vue.js(18)/WordPress(23)/料理(10)