Vue 监听 Vuex 提交？

Posted 2023-02-22

【中文标题】Vue 监听 Vuex 提交？

【英文标题】：Vue listen for Vuex commit?

【发布时间】：2017-12-21 06:34:01

【问题描述】：

有没有一种方法可以监听 Vuex 提交，而无需查看随提交更改的任何属性？只是简单地找出是否发生了提交？

我有一个过滤器组件，我想将它放入 NPM 包中，但我已经有一个用例，我想在选择过滤器时设置一个存储过滤器首选项的 cookie。

显然，过滤器组件不负责设置 cookie 等，这应该是可选的。

我想一种方法是使用全局事件总线，但这意味着使用我的包的用户必须完全按照我的需要设置一个。每当过滤器事件被触发时，用户就可以执行必要的操作。

如何保留这个SRP 并作为 NPM 包进行清理，同时仍然允许用户挂钩某些事件？

有点宽泛的问题，但我希望你能明白要点。

【参考方案1】：

您可以使用商店的 subscribe 方法监听提交/突变。

API 参考：https://vuex.vuejs.org/en/api.html

Vuex 插件也适用于这个确切的用例。文档：https://vuex.vuejs.org/en/plugins.html

例子：

let vuexPlugin = (store) => 
    let whitelist = ['abc', 'def', 'ghi'];
    store.subscribe((mutation, state) => 
        if (whitelist.includes(mutation.type)) 
            // your code here
        
    );
;