Vuex がリアクティブにならない

Question

上段は Array と、その合計値です。Button を押すと要素が追加されます。問題なくリアクティブとして動作しています。

下段は二分探索木と、その合計値です。Button を押すと要素が追加されます。値が更新されたり、されなかったりでマチマチになってしまっています。

ソースコードは、以下の通りになります。

• https://github.com/niconico25/teratail-question-01

調べたこと

Vuex の公式ドキュメントを見たのですが、ふんわりとしか書かれていませんでした。他にも当たって見たのですが、これというものが見当たらず、どの資料に当てれば良いか、窮しております。

Vuex を利用するとストア内に "ゲッター" を定義することができます。それらをストアの算出プロパティと考えることができます。算出プロパティと同様に、ゲッターの結果はその依存関係に基づいて計算され、依存関係の一部が変更されたときにのみ再評価されます。
ゲッター - Vuex

何か思い当たるものがありましたら、ご教示いただけると幸いでございます。

Answer 1

初歩的なところでつまづいていました orz

原因は、 state に付随するオブジェクトにプロパティを追加する際に、そのまま代入 = してしまっていたことです。

      ...

      // 誤
      // node.left = { value: newValue }
      // 正
      Vue.set(node, 'left', { value: newValue })

      ...

      // 誤
      // node.right = { value: newValue }
      // 正
      Vue.set(node, 'right', { value: newValue })

• https://github.com/vuejs/vuex/issues/259

Vue.set を使うことで改善しました。木の合計値もちゃんと更新されました（反応しないだろうと思っていたので、どうやって変更の検知を実装しているのか気になります...）。

そのほかにも、いくつかやり方はあるようです。

# 1
Vue.set(obj, 'newProp', 123)

# 1' SFC 内の場合
this.$set(obj, 'newProp', 123)

# 2 Vuex 内の場合
state.obj = { ...state.obj, newProp: 123 }

• https://vuex.vuejs.org/guide/mutations.html#mutations-follow-vue-s-reactivity-rules