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' });
  },
}