Vue.js Vuex SPA 親からバケツリレーしたstateの値( props )の変更を子コンポーネントで検知したい

Vueでpropsの値の変更を検知する方法はないのでしょうか？
やっていることは、

stateのgettersを通してcountを取得
↓
vuex-connectを用いて定義したcontainersでcomponentを生成
↓
propsバケツリレーで子コンポーネントに渡す

やりたいことは子コンポーネントでのpropsの変更を検知することです。
（mountedに反応するようにしたい）

store/modules/A/index.js

js
1const store = {
2  state () {
3    return {
4      count: 0
5    }
6  },
7  actions,
8  getters,
9  mutations
10}

containers/generator.js

js
1import { connect } from 'vuex-connect'
2
3import Parent from '../components/parent'
4
5import { Count } from '@/store/modules/A'
6
7export default connect({
8  gettersToProps: {
9    count: Count
10  },
11  methodsToEvents: {
12  }
13})('A', Parent)

components/parent/index.vue

vue
1<template>
2<div>
3  <child :count=count />
4</div>
5</template>
6
7<script>
8export default {
9  components: { child },
10  props: {
11    count: {
12      type: Number,
13      default: 0
14    }
15  }
16}
17</script>

components/child/index.vue

vue
1<script>
2export default {
3  props: {
4    count: {
5      type: Number,
6      default: 0
7    }
8  },
9  mounted: function () { // ここで反応して欲しい
10    if (count % 3 === 0) {
11      console.log("Alert")
12    }
13  }
14}
15</script>

行動規範の内容に同意します

回答1件

ベストアンサー

mountedはコンポネントがDOMに設置される時に1回しか呼ばれないので、そこで値の変更は検知できません。作成時の値しかもらえません。
watchにしたら、コンポネントがmountedしてから、destroyedされるまで、ずっと検知できます。

下記のファイルは参考になるのでしょうか。components/ChildComponent.vueでwatchとmountedのサンプルがあります。

javascript
1// main.js
2
3import Vue from 'vue'
4import App from './App.vue'
5import store from './store'
6
7new Vue({
8  store,
9  render: h => h(App)
10}).$mount('#app')

javascript
1// store.js
2
3import Vue from 'vue'
4import Vuex from 'vuex'
5
6Vue.use(Vuex)
7
8export default new Vuex.Store({
9  state: {
10    count: 0
11  },
12  mutations: {
13    INCREMENT(state) {
14      state.count++
15    }
16  },
17  actions: {
18    increment() {
19      this.commit('INCREMENT')
20    }
21  }
22})

javascript
1// App.vue
2
3<template>
4  <div>
5    <div style="border: 1px solid black">
6      <strong>親</strong>
7      <div>カウント: {{ count }}</div>
8      <div>アクション:
9        <button @click="$store.dispatch('increment')">追加</button>
10        <button @click="showChild = !showChild">子を作成・排除</button>
11      </div>
12
13    </div>
14
15    <ChildComponent v-if="showChild" />
16
17  </div>
18</template>
19
20<script>
21import ChildComponent from './components/ChildComponent.vue'
22
23export default {
24  components: {
25    ChildComponent
26  },
27
28  data() {
29    return {
30      showChild: false,
31    }
32  },
33
34  computed: {
35    count() {
36      return this.$store.state.count
37    }
38  }
39}
40</script>

javascript
1// components/ChildComponent.vue
2
3<template>
4  <div>
5    <div style="border: 1px solid black">
6      <strong>子</strong>
7      <div>カウント: {{ count }}</div>
8      <div>アクション: <button @click="$store.dispatch('increment')">追加</button></div>
9
10      <div>
11        <h2>ログ</h2>
12        <div v-html="logs.join('<br>')"></div>
13      </div>
14    </div>
15  </div>
16</template>
17
18<script>
19export default {
20  data() {
21    return {
22      logs: []
23    }
24  },
25
26  computed: {
27    count() {
28      return this.$store.state.count
29    }
30  },
31
32  watch: {
33    count() {
34      this.logs.push(`カウント: ${this.count} | ChildComponentがにてcountの変化に反応。`)
35    }
36  },
37
38  mounted() {
39    this.logs.push(`カウント: ${this.count} | ChildComponentが作成時にしか呼ばれない。`)
40  }
41}
42</script>