Question

100

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

rated 0 times [ 101] [ 1] / answers: 1 / hits: 41001 / 7 Years ago, thu, june 1, 2017, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

deniseryannd

Add To Favorites

Follow

Total Points: 169

Total Questions: 85

Total Answers: 96

Location: Virgin Islands (U.S.)

Member since Fri, May 7, 2021

3 Years ago

answered 7 Years ago harleyterryp · Accepted Answer

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

    }

  }

}