

storeの値をwatchしたいのですが、「Error: [vuex] store.watch only accepts a
function.」となってしまいます。  
こちらのサイトを参考にしました。  
<https://codepen.io/CodinCat/pen/PpNvYr>

複数のstoreを使用している場合は、どのようにwatchしたらよいのでしょうか。

index.js

[code]

    'use strict';
    import Vue from 'vue';
    import Vuex from 'vuex';
    
    import {test1Store} from './modules/test1.js';
    import {test2Store} from './modules/test2.js';
    
    Vue.use(Vuex);
    export const store = new Vuex.Store({
        modules: {
            test1: test1Store,
            test2: tes21Store,
        }
    });
    
[/code]

test1.js

[code]

    'use strict';
    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    export const checkerStore = {
        namespaced: true,
        state: {
            count: 1
        },
    
        getters: {
            getCount(state){
                return state.count;
            }
        }
    };
    export default {test1};
    
[/code]

test.vue

[code]

    <template>
        {{ $store.state.couunt }}
    </template>
    
    <script>
        import {store} from './store/index.js';
        export default {
            data: function () {
                return {
    
                }
            },
            store: store,
            methods: {
    
            },
            mounted() {
                setInterval(() => { this.$store.state.count++ }, 1000);
                this.$store.watch(this.$store.getters['test1/getCount'], n => {
                    console.log('watched: ', n)
                    })
                }
            }
        }
    </script>
    
[/code]


CC BY-SA 3.0
2018-01-10T09:32:43.963
40859
2018-07-03T06:33:50.683
16768
question
javascript vue.js
vuexでの複数storeのwatch


logを取りたいだけならpluginを使えばできそうです。

<https://codepen.io/isuke/pen/jxgdVQ>  
こちらに書いてみました。

もう少し詳しくやりたいことを書いてもらえると、よりよい方法を教えることができるかもしれません。

[code]

    const logger = store => {
      store.subscribe((mutation, state) => {
        console.log('watched: ' + state.test1.n)
      })
    }
    
    const store = new Vuex.Store({
      modules: {
        test1: {
          state: {
            n: 1
          },
          mutations: {
            increment (state) { state.n++ }
          },
          getters: {
            getN (state) { state.n }
          }
        }
      },
      plugins: [logger]
    })
    
    new Vue({
      el: '#app',
      store,
      methods: {
        up () { 
          this.$store.commit('increment') 
        } 
      }
    })
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.1.1/vuex.js"></script>
    
    <div id="app">
      <button @click="up">click</button>
      {{ $store.state.test1.n }}
    </div>
[/code]


CC BY-SA 4.0
2018-05-27T16:16:21.917
44306
2018-05-27T19:12:43.390
2018-05-27T19:12:43.390
3068
28630
40859
answer