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

StoreのデータをComponentでリアクティブに反映する方法で一番シンプルなのは、恐らくcomputedを使う方法。

export default Vue.extend({
  computed: {
    data() {
      return store.state.data;
    }
  }
});

これでStoreのdataプロパティが変更されれば、computedが自動で変更検知しVueに反映される。

ただし、直接Storeの値を取れない場合、別の手が必要になる。

具体的には、間に色々値を加工するインターフェースを噛ませているとか。
特にそのインターフェース内で非同期通信が行われる場合、computedではasync/awaitが使えないため上記の方法は使えない。

そこで、storeのwatchメソッドを使う。

vuex-module-decoratorsを使用しているため、通常と記法が異なるかもしれません(特にgetters["someModule...のところ)。必要に応じて補完してください。

export default Vue.extend({
  async created() {
    this.unwatch = this.$store.watch(
      (state, getters) => getters["someModule/data"],
      (newValue, oldValue) => {
        console.log(newValue);
      }
    );
  }
});

Store内の特定のstateが変更された際に、イベントを発生させることができる。

続き(https://coneta.jp/article/show/2955)