StoreのデータをComponentでリアクティブに反映する方法で一番シンプルなのは、恐らくcomputedを使う方法。 ```javascript 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...のところ)。必要に応じて補完してください。 ```javascript 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)
2021/04/22 18:29:11

コメント (0)

あなたもコメントしてみませんか

アカウント新規作成(無料)

既にアカウントを持っている方は ログイン