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

Question

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

我的突变看起来像这样：

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

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

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

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

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

Answer 1

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

如果可能的话，另一种选择是让所有过滤器 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(...)
    }
  }
}

Answer 2

您实际上可以使用 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' });
  },
}

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

Vue.js[vuex] how to dispatch from a mutation?

javascript

vue.js

vuejs2

vuex