福岡拠点の宮里です。
vueのコンポーネントからvuexの値の更新を監視して、vuexの値の更新があったときにローカルのデータを更新したい場合どうすればいいの？と調べることがあったので備忘録として記事を書きます。
まずは、vuexの日本語ドキュメントを読みました。
vuexのStoreインスタンスメソッド’watch’が良さそうです。
watch(fn: Function, callback: Function, options?: Object): Function
fnが返す値をリアクティブに監視し、値が変わった時にコールバックを呼びます。fnは最初の引数としてストアのステートを、2番目の引数としてゲッターを受け取ります。 Vue のvm.$watchメソッドと同じオプションをオプションのオブジェクトとして受け付けます。
監視を止める場合は、返された unwatch 関数を呼び出します。
うーん、vue.jsに慣れてないので上記の説明を読んでもよくわかりません。
store.watch()で引数に関数を渡して、関数の引数に監視したいstateの値を指定するみたいです。
うーん、もう一声。
‘vuex store.watch’で検索するとそれっぽい参考になりそうなコードがいくつか。
イメージはつかめてきたものの、ただ今回は、複数に分割したストアのモジュールのローカルステートを監視したかったので、mapGettersやmapStateで実際どう書けばいいのと悩むこと数十分。
ありました、ありました！
vue.js開発者の方のブログに「Watch for Vuex State changes!」という記事が！！
探してたのこれこれ！ありがとうございます！と参考にさせていただきましたm(＿ ＿)m
四苦八苦しつつもなんとかこのかたちに落ち着きました。
this.$store.watch()の第一引数にステート/ゲッター、どちらを渡してもうまくいきそうです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<script> import _ from 'lodash' import { mapState, mapGetters, mapActions } from 'vuex' export default { computed: { ...mapActions('artists', [ 'fetchAlbums', ]), ...mapGetters('artists', [ 'getAlbumList', ]), ...mapState('artists', [ 'artistId', 'name', 'genres', 'albumList', 'popularity', ] ), }, methods: { this.$store.watch(() => this.albumList, (value) => { if (!_.isEmpty(value)) { console.log(_.map(value, 'when we fall asleep, where do we go?')) } }, ) }, data () { return { album: { title: '', image: '', trackList: [], releaseDate: '' }, } }, created: function () { this.fetchAlbums }, mounted: function () { this.watchStore() }, } </script> |