vuex 订阅单个突变

Posted 2023-02-22

【中文标题】vuex 订阅单个突变

【英文标题】：vuex subscribe to individual mutation

【发布时间】：2018-02-01 09:38:52

【问题描述】：

是否可以订阅单个突变？

代替：

this.$store.subscribe((mutation, state) => 
   if(mutation === 'someMutation')
       doSomething()
   
)

我想要这样的东西：

this.$store.subscribe('someMutation', state => 
    doSomething()
)

【问题讨论】：

你可能需要检查vuex.vuejs.org/api/#watch

不，不幸的是它会为所有突变运行：docs

在组件中使用 mapState 来获取商店状态中的特定数据，然后在上面使用 watch 怎么样？

正如@MikeHarrison 在文档中提到的那样，您也可以在vuex 代码github.com/vuejs/vuex/blob/dev/src/store.js（第103 行）中看到。 vuex 只是调用子数组中的任何函数而不检查突变。所以vuex其实不支持。当然，您可以在幕后构建自己的模块/函数来处理它。并使用它。

【参考方案1】：

把你有的方法封装在 Vue 原型的某个地方怎么样？

所以不要有：

this.$store.subscribe((mutation, state) => 
   if(mutation === 'someMutation')
       doSomething()
   
)

你会有类似的东西：

Vue.prototype.subscribeMutation = function(someMutation, someFunction) 
       this.$store.subscribe((mutation, state) => 
       if(mutation === someMutation)
           someFunction(state)
       
    )

我没有测试过代码，但是你应该可以很容易地得到工作结果。

【讨论】：

在 Vue 3 中你想做 if(mutation.type === someMutation) ...

【参考方案2】：

来自 vuex 文档：

每次突变后都会调用处理程序并接收突变 描述符和突变后状态作为参数。

它会对所有的突变做出反应，所以你只能用你自己的条件来实现。

【参考方案3】：

试试这样的：

this.$store.subscribe(mutation => 
                if (mutation.type === 'setData') 
//  do something here
                
            );

【讨论】：

仅代码的答案质量低下，可能会被删除，应始终至少有一两句话解释您要解决的问题以及有关正在发生的事情的一些信息。

这和我已经在做的差不多。 （即我的问题中的第一个代码示例）。我正在寻找像第二个示例这样的解决方案