Vuexでオブジェクトや配列の変更を画面に反映したい


#1

連投してすみません、またもVuexに関する質問です。

質問

Vuexの値をコンポーネントから参照して画面に表示する際、number等プリミティブな値は変更後即反映されるのですが、配列等のオブジェクトになると更新されません。
どのようにすると表示が更新されますでしょうか。

実装

以下で、rootButton+を押すとrootCount(number型)がインクリされているのが画面にも反映されるのですが、aButton+を押してもcountA(number配列型)の更新が画面に反映されません。(同時にconsole.logでstateを表示していますが、こちらはインクリされているのが確認できます)

countAcomponents/HelloWorld.vueにてcomputedを利用して参照していますが(vue-class-componentを使っているので実装上はget count()としています)、うまくいっておりません。

this.$store.watchを使わずとも画面更新は行える認識でいるのですが、間違い部分をご教示いただければ幸いです。


#2

Vuexでなく、Vue側の制限でした 。

上記参考にして、mutationsでの配列の値変更時に
state.countA[0]++;
でなく
state.countA.splice(0, 1, state.countA[0] + 1);
とすることで解決しました。