0

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

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

index.js

'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,
    }
});

test1.js

'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};

test.vue

<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>

1 件の回答 1

2

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

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

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

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') 
    } 
  }
})
<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>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。