如何在 Vue.js 和 Vuex 中观看另外两个商店？

Question

我正在使用 Vue.js 和 Vuex。 我想watchstore 的值（我将在本文的最后分享我的示例代码）。 但是我遇到了错误“错误：[vuex] store.watch 只接受一个函数。”

在这个网站上，我发现了如何使用“单一”商店。 https://codepen.io/CodinCat/pen/PpNvYr

但是，就我而言，我想使用“两个”商店。 你有什么办法解决这个问题吗？

●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 => { ... })