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

Question

I have a list of filters I want to apply to a json object.

My mutations look like this:

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

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

Because of how filters work I need to re-apply them all again since I can't simply keep downfiltering a list because this gets me into trouble when a user de-selects a filter option.

So when a mutation is being made to a stars filter or reviews filter(user is filtering) I need to call a function that runs all my filters.

What is my easiest option here? Can I add some kind of helper function or possible set up an action which calls mutations that actually filter my results?

When you need to return a filtered data, there is no need to mutate your storage. Keep your data intact and create a getter which returns filtered data, either 2 getters (1 for each case) or a single getter which accepts an argument (filter condition). Related reading: vuex.vuejs.org/en/getters.html — Egor Stambakio
– Egor Stambakio, Commented Jun 1, 2017 at 14:25
@wostex I would agree with you if it were just one filter but I need to apply multiple filters at once for a single value. So I can not just use 1 or 2 getters separately. They need to work together. — Stephan-v
– Stephan-v, Commented Jun 1, 2017 at 14:26
@wostex true but I would need any getter to call every other getter that is a filter and do this for all getters. It would get messy real fast. Perhaps I don't really see what you mean but thanks for the tip anyways! — Stephan-v
– Stephan-v, Commented Jun 1, 2017 at 14:29

Matt · Accepted Answer · 2017-06-01 14:31:08Z

50

Mutations can't dispatch further actions, but actions can dispatch other actions. So one option is to have an action commit the mutation then trigger the filter action.

Another option, if possible, would be to have all filters be getters that just naturally react to data changes like a computed property would.

Example of actions calling other actions:

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

edited Jun 1, 2017 at 14:31

answered Jun 1, 2017 at 14:07

Matt

44.1k6 gold badges105 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Stephan-v Over a year ago

So with every mutation I do, I need to call a dispatch straight after it from my Vue components? Since I am not able to call an action from a mutation inside my Vuex store?

Matt Over a year ago

@Stephan-v i would actually have the components dispatch a setReviews action instead of a mutation. The action can both the commit the setReviews mutation and trigger the filter action.

Stephan-v Over a year ago

Makes sense. How do I properly call another action from an action inside my Vuex store though?

Matt Over a year ago

@Stephan-v actions receive context as their first parameter, which contains a dispatch function you can use. I updated my post with a quick, untested example

gmm · Accepted Answer · 2020-03-30 15:22:28Z

7

You can actually dispatch actions from a mutation by using this. For example:

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

answered Mar 30, 2020 at 15:22

gmm

1,0301 gold badge22 silver badges33 bronze badges

3 Comments

SikoSoft Over a year ago

I strongly discourage anyone from doing this. It is very much an anti-pattern. Mutations are very clearly intended to be synchronous / blocking code, where as actions are not. This is in essence undermining the strict role mutations have by permitting them to do more than they should do (that is, take some property of state and modify it with the input its received in some way).

Hexodus Over a year ago

@Lev I agree that this is indeed an anti-pattern but the part about Actins being async only isn't true. Yes async code should be placed in Actions but Actions can as well contain synchronous code.

Wikki Feb 11 at 14:13

Mutations are synchronous and should never call actions as this will be anti-pattern. Instead actions may call other actions using dispatch. This way async calls of any actions will not cause issue. But calling actions from mutations will cause state update issues and hang up of rendering

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related