Question

我正在使用Vue.js和Vuex。我希望watch store的值{我将在本文的最后一篇中分享我的示例代码）。但是我遇到了错误＆＃34;错误：[vuex] store.watch只接受一个函数。＆＃34;

在这个网站上，我找到了如何使用＆＃34; single＆＃34;商店。 https://codepen.io/CodinCat/pen/PpNvYr

然而，在我的情况下，我想使用＆＃34;两个＆＃34;商店。你有任何想法来解决这个问题。

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

Answer 1

您收到了该错误，因为在您的示例代码中，您传递给watch的第一个参数，如错误所示，不是function。

这个论点实际上是使用Vue引导下的原生JavaScript调用Object.defineProperty来实现的，所以实现store.getters['test1/getCount']的结果实际上是number。

我不认为它建议在像您这样的场景中使用watch，但如果您坚持，可以通过提供备用参数表单访问count，像：

this.$store.watch((state, getters) => getters['test1/getCount'], n => { ... })

如何在Vue.js和Vuex中再看两家店？

1 个答案: