1

I'm using Vue.js and Vuex. I want to watch the value of store (I'll share my sample codes in the last of this post). But I have encountered the error "Error: [vuex] store.watch only accepts a function."

In this Web site, I found how to use "single" store. https://codepen.io/CodinCat/pen/PpNvYr

However, in my case, I want to use "two" stores. Do you have any idea to solve this problem.

●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>
ketancho
  • 335
  • 1
  • 2
  • 6
  • Possible duplicate of [vuejs 2 how to watch store values from vuex](https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex) – thanksd Jan 10 '18 at 21:48

1 Answers1

0

You're getting that error because in your example code, the first argument you've passed to watch is, as the error suggests, not a function.

The argument is actually implemented using the native JavaScript call Object.defineProperty underneath the hood by Vue, so the result of doing store.getters['test1/getCount'] as you have, is actually a number.

I don't think it's recommended to use watch in a scenario like yours, but if you insist, you can access count by providing an alternate argument form, something like:

this.$store.watch((state, getters) => getters['test1/getCount'], n => { ... })
miqh
  • 3,624
  • 2
  • 28
  • 38
  • Thank you so much!! I can solve my problem and work well with your suggestion code. If you can, I want to know why you said `I don't think it's recommended to use watch in a scenario like yours`. Thanks, – ketancho Jan 11 '18 at 04:53
  • @ketancho, no problem, I'm glad my answer helped. As for my recommendation remark, I'm not sure exactly what you're doing inside the `watch` callback, but if you're simply responding to the state change by using the new value to calculate something else, using a `computed` property is a much cleaner way of accomplishing this. In case you missed it, the [official documentation](https://vuex.vuejs.org/en/getters.html) has great examples concerning this. – miqh Jan 11 '18 at 05:09
  • Thanks a lot!! I try to read official document in detail and think which is better way in my case. Thanks!!!! – ketancho Jan 11 '18 at 07:13