从 vuex 模块中监听动作/突变

Posted 2023-02-22

【中文标题】从 vuex 模块中监听动作/突变

【英文标题】：Listen to actions/mutations from within a vuex modules

【发布时间】：2019-04-15 14:07:42

【问题描述】：

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

我知道我可以从 auth 模块的登录和注销操作中分派 ui 操作。但我宁愿让它反过来，这样ui 正在监听auth 中发送的事件（动作和/或突变）。这样我就可以轻松创建副作用，而无需更改“原始”vuex 模块。

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

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

【问题讨论】：

Vue listen for Vuex commit?的可能重复

也许你可以在模块内订阅

谢谢还没有找到，但它建议使用插件。我想知道是否有另一种方式来收听（或订阅）模块中的操作

我想一个插件会为你解决它

将其用作插件是可选的。 Subscribe API 可以在商店实例创建后注册。无法从模块内监听，因为模块被编译到单个存储实例中。

【参考方案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]
);