Question

我有一个带有多个模块的vuex存储，并且我希望能够从模块内部监听“全局” dispatch或commit调用（也称为动作和变异）。例如，在auth模块中，有诸如登录和注销之类的操作。每当调度这些动作时，我都希望另一个模块ui也执行某些动作，例如根据登录用户设置语言。

我知道我可以从ui模块中的登录和注销操作中调度auth操作。但是，我宁愿采用另一种方法，以便ui监听auth中调度的事件（动作和/或突变）。这样，我可以轻松地产生副作用，而无需更改“原始” vuex模块。

也许我需要使用手表，但是某些动作不会改变状态，所以我不能总是使用它们。创建插件也是一种选择，但是我不想每次创建这种副作用时都创建一个额外的插件。

所以我的问题；从vuex模块内部，我该如何收听从其他模块调度的操作/突变？

Answer 1

我为自己创建了一个vuex插件，该插件可以触发所有商店中的所有刷新操作。但是您可以做我所说的刷新操作。

插件：

const onModuleAValueChange= (store) => {
    store.watch(
        state => state.moduleA.value,
        (val, oldVal) => {
            // Don't do anything on init state
            if (!oldVal) return;

            // This will trigger all refresh actions on all store. But you can add anything here
            // Essentially does: 
            // store.dispatch(`moduleA/refresh`); 
            // store.dispatch(`moduleB/refresh`); 
            // store.dispatch(`moduleC/refresh`);
            for (let state in store.state) {
                const action = `${state}/refresh`;
                // If the store does not have an refresh action ignore
                if (store._actions[action]) store.dispatch(`${state}/refresh`);
            }

            // Additional action 
            store.dispatch(`moduleC/moduleC_Action`);
        }
    );
};

商店核心：

export const store = new Vuex.Store({
    modules: {
        moduleA,
        moduleB,
        moduleC
    },
    plugins: [onModuleAValueChange]
});

在vuex模块中聆听动作/变异

1 个答案: