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を定義しているわけです。

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

嫌われる勇気―――自己啓発の源流「アドラー」の教え

イノベーションのジレンマ 増補改訂版 Harvard business school press

角川まんが学習シリーズ 日本の歴史2019全15巻+別巻4冊セット【近現代史まるわかりすごろく&サイコロバトルえんぴつ】つき

アフィリエイトで夢を叶えた元OLブロガーが教える 本気で稼げる アフィリエイトブログ 収益・集客が1.5倍UPするプロの技79

情報処理教科書 出るとこだけ! 基本情報技術者 テキスト&問題集 2019年版