📘
Vue と Vuex の ウォッチャー / プロパティの変更を検知する | Vue3, Vuex4
Vue のウォッチャー / Vue Watchers
Vue において、data の状態を監視する方法.
ウォッチャーを使うと、対象の data が変更されるたびに関数を実行することができる.
Component.vue
export default {
data() {
return {
question: '', // 監視対象のプロパティ "question"
};
},
watch: {
// ウォッチャーの定義
question(newQuestion, oldQuestion) {
… // "question" が変更されるたびに実行される
}
},
…
}
Vuex のウォッチャー / Vuex Watchers
書き方は若干違うが、Vue のウォッチャーと効果はほぼ同様である.
以下、例として次のような store を考える. (かなり省略されている)
main.js
const store = createStore({
state: {
prefecture: null // 監視対象
},
getters: {
prefecture(state) { return state.prefecture }
},
});
そして、その場合の Watch 登録例が以下である.
Component.vue
export default {
…
mounted() {
this.$store.watch(
(state, getters) => getters.prefecture,
(newValue, oldValue) => {
// "prefecture" が変更されるたびに実行される
…
}
)
}
}
Vuex の他の方法
Vuex に関する情報は、こちらのサイトを参考にさせていただいた. これを簡単にまとめると、次のようになる.
Vuex で state 関連の変更を検知する方法は、3 つある.
| 方法 | 監視対象 | 特徴 |
|---|---|---|
| watch | state | 直接 state を監視, 変更前後の値を取得できる |
| subscribe | mutations | mutation 実行後に実行 |
| subscribeAction | actions | action 実行に伴い起動 (前後の選択が可能) |
状態の監視は watch, イベントフックは subscribe または subscribeAction を使い分ける.
詳しい書き方等はソースを確認してください.
Discussion