4

我有一个包含多个模块的 vuex 商店，我希望能够从一个模块中收听“全局”dispatch或调用（也就是动作和突变）。commit例如，在一个auth模块中有登录和注销之类的操作。每当调度这些操作时，我希望另一个模块ui也执行一些操作，例如根据登录用户设置语言。

我知道我可以ui从模块中的登录和注销操作中分派操作auth。但我宁愿让它反过来，这样ui就是监听在auth. 这样我就可以轻松地创建副作用，而无需更改“原始”vuex 模块。

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

所以我的问题；在 vuex 模块中，如何监听从其他模块发送的动作/突变？

4

1 回答 1

0

我为自己创建了一个 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]
});
于 2018-11-13T10:17:10.323 回答