[Vue] Storeの値を直接コンポーネントで取得できない場合のリアクティブな反映方法2

mayatasomayataso

[Vue] Storeの値を直接コンポーネントで取得できない場合のリアクティブな反映方法(https://coneta.jp/article/show/2954) の続き

もしオブジェクト内のとあるプロパティのみ(もしくはそれ以下)を監視したい、という場合は以下

export default Vue.extend({
  async created() {
    this.unwatch = this.$store.watch(
      (state, getters) => getters["someModule/object"].prop.list[0],
      (newValue, oldValue) => {
        console.log(newValue);
      },
      { deep: true }
    );
  }
});

deep: trueを指定することでオブジェクトの中身まで監視できる。

上の例だと、object.prop.listの0番目が変更されたときのみ、イベントが発火する。

unwatchというdataに代入しているのは、返り値としてunsbscribeするための関数が戻ってくるため。

Componentの破棄時にでも監視を停止しよう。

beforeDestroy() {
  this.unwatch();
},