Vue.js[vuex] 如何从Mutations中调度

发布于06月01日

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

我的基因Mutations 是这样的:

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

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

由于过滤器是如何工作的，我需要重新应用它们，因为我不能简单地一直向下过滤列表，因为当用户取消 Select 过滤器选项时，这会给我带来麻烦.

因此，当对stars筛选器或reviews筛选器(用户正在筛选)进行变异时，我需要调用一个运行所有筛选器的函数.

我最简单的 Select 是什么？我可以添加一些辅助函数，或者设置一个调用Mutations 的操作来过滤我的结果吗？

推荐答案

Mutations 不能分派进一步的行动，但行动可以分派其他行动.因此，一种 Select 是让一个动作提交变异，然后触发过滤动作.

如果可能的话，另一种 Select 是将所有过滤器设置为getters，就像计算(computed)属性一样自然地对数据更改做出react .

调用其他操作的操作示例:

// 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(...)
    }
  }
}