Vue.js[vuex] 如何从突变中调度？

Posted 2023-02-22

【中文标题】Vue.js[vuex] 如何从突变中调度？

【英文标题】：Vue.js[vuex] how to dispatch from a mutation?

【发布时间】：2017-11-02 17:25:06

【问题描述】：

我有一个要应用于 json 对象的过滤器列表。

我的突变如下所示：

const mutations = 
    setStars(state, payload) 
        state.stars = payload;
        this.dispatch('filter');
    ,

    setReviews(state, payload) 
        state.reviews = payload;
        this.dispatch('filter');
    
;

由于过滤器的工作原理，我需要再次重新应用它们，因为我不能简单地对列表进行向下过滤，因为当用户取消选择过滤器选项时这会给我带来麻烦。

因此，当对星星过滤器或评论过滤器（用户正在过滤）进行突变时，我需要调用一个运行我所有过滤器的函数。

我最简单的选择是什么？我可以添加某种辅助函数或可能设置一个调用实际过滤结果的突变的操作吗？

【问题讨论】：

当您需要返回过滤后的数据时，无需更改您的存储。保持数据完整并创建一个返回过滤数据的 getter，可以是 2 个 getter（每种情况 1 个）或一个接受参数（过滤条件）的 getter。相关阅读：vuex.vuejs.org/en/getters.html

@wostex 如果它只是一个过滤器，我会同意你的看法，但我需要一次为单个值应用多个过滤器。所以我不能单独使用 1 或 2 个吸气剂。他们需要一起工作。

一个getter可以调用另一个getter。

@wostex true 但我需要任何吸气剂来调用作为过滤器的所有其他吸气剂并为所有吸气剂执行此操作。它会很快变得一团糟。也许我真的不明白你的意思，但还是谢谢你的提示！

这就是我的意思：jsfiddle.net/wostex/u2yoLgLb

【参考方案1】：

您实际上可以使用this 从突变中分派操作。 例如：

const actions = 
  myAction( dispatch, commit ,  param ) 
  // Do stuff in my action
  


const mutations = 
  myMutation(state, value) 

    state.myvalue = value;
    this.dispatch('myModule/myAction',  param: 'doSomething' );
  ,

【讨论】：

我强烈反对任何人这样做。这在很大程度上是一种反模式。突变非常明确地旨在成为同步/阻塞代码，而动作则不是。这实质上是通过允许突变做的比他们应该做的更多的事情来破坏严格的角色（即，获取状态的某些属性并使用以某种方式接收到的输入来修改它）。

@Lev 我同意这确实是一种反模式，但关于 Actins 仅异步的部分是不正确的。是的，异步代码应该放在 Actions 中，但 Actions 也可以包含同步代码。

【参考方案2】：

突变不能派发进一步的动作，但动作可以派发其他动作。所以一种选择是让一个动作提交突变，然后触发过滤动作。

如果可能的话，另一种选择是让所有过滤器都是getters，它们会像计算属性一样自然地对数据变化做出反应。

调用其他动作的动作示例：

// store.js
export default 
  mutations: 
    setReviews(state, payload) 
      state.reviews = payload
    
  

  actions: 
    filter() 
      // ...
    

    setReviews( dispatch, commit , payload) 
      commit('setReviews', payload)
      dispatch('filter');
    
  



// Component.vue
import  mapActions  from 'vuex';

export default 
  methods: 
    ...mapActions(['setReviews']),
    foo() 
      this.setReviews(...)
    
  

【讨论】：

所以对于我所做的每一个突变，我都需要直接从我的 Vue 组件调用一个调度？因为我无法从我的 Vuex 商店中的突变中调用操作？

@Stephan-v 我实际上会让组件调度 setReviews 动作而不是突变。 action 可以同时提交setReviews 突变和 触发filter 动作。

有道理。但是，如何从我的 Vuex 商店中的操作中正确调用另一个操作？

@Stephan-v 操作接收context 作为其第一个参数，其中包含您可以使用的dispatch 函数。我用一个未经测试的快速示例更新了我的帖子