[[Vue] Storeの値を直接コンポーネントで取得できない場合のリアクティブな反映方法](https://coneta.jp/article/show/2954) の続き もしオブジェクト内のとあるプロパティのみ(もしくはそれ以下)を監視したい、という場合は以下 ```javascript 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の破棄時にでも監視を停止しよう。 ```javascript beforeDestroy() { this.unwatch(); }, ```
2021/04/22 18:35:02

コメント (0)

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

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

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