computedを利用してVuexのstoreをwatch

storeの変更を検知したいパターン

Vue.jsでは状態を管理するのに便利なVuexのstoreですが、storeの値が変更されたタイミングでイベントを実行したくなる場面はありませんか？

例えば別なコンポーネントで、非同期で値を取得するAPIを実行し、その結果をstoreに格納するパターンなどがありますね。

そのような時にどのように実装すれば良いのでしょうか。

computedを利用するやり方

僕の中ではcomputedを利用してstoreをwatchするやり方が一番扱いやすいかなという感想です。

記述は増えますが、シンプルな実装ができますね。
以下のようになります。
今回は例としてmoneyと定義したstoreを使います。

※色々記述を飛ばしてcomputedとwatchしか書いてません笑

computed: {
  money: function () {
    return this.store.getters['money/getMoney']
  }
},
watch: {
  money () {
    this.$nextTick(() => {
      console.log('変更されました')
    })
  }
}

簡単に説明しますと、computedにmoneyのstoreを返す関数(属性)を定義しておきます。
これでstoreの値が変わるタイミングで、moneyが変更されるため、あとはその変更を検知するwatchを定義しているわけです。

二度手間な感は否めませんが、理解すればシンプルかなと思います。