Can I call commit from one of mutations in Vuex store Can I call commit from one of mutations in Vuex store vue.js vue.js

Can I call commit from one of mutations in Vuex store


If you absolutely must commit two mutations, why not do it from an action? Actions don't have to perform async operations. You can destructure the commit method in your action the same way you do with state like so:

commitTwoThings: ({commit}, payload) => {  commit('MUTATION_1', payload.thing)  commit('MUTATION_2', payload.otherThing)}


For the record. To call other mutations from a mutation method do it like this:

const mutations = {    mutationOne(state, payload){        this.commit("mutationTwo", payload)    },    mutationTwo(state, payload){        console.log("called from another mutation", payload)    }}


When you are already doing a mutation, there is no way to commit another mutation. A mutation is a synchronous call which changes the state. Within one mutation, you will not be able to commit another mutation.

Here is the API reference for Vuex: https://vuex.vuejs.org/en/api.html

As you can see, a mutation handler receives only state and payload, nothing more. Therefore you are getting commit as undefined.

In your case above, you can set the PRODUCT and CATEGORIES as part of the same mutation handler as a single commit. You can try if the following code works:

// mutationsconst mutations = {    SET_PRODUCTS_AND_CATEGORIES: (state, response) => {        state.products = response.data.products        state.categories = state.products.map(function(product) { return product.category})    },    // ...}

EDIT: Please refer to the answer below, provided by Daniel S. Deboer. The correct method is to commit two mutations from a single action, as described in his answer.