[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が変更された際に、イベントを発生させることができる。