How to access Vuex modules mutations

Question

I read thorugh his documentation from vue but I didn't find anything about how to actually access specific module in the store when you have multiple modules.

Here is my store:

export default new Vuex.Store({
  modules: {
    listingModule: listingModule,
    openListingsOnDashModule: listingsOnDashModule,
    closedListingsOnDashModule: listingsOnDashModule
  }
})

Each module has its own state, mutations and getters.

state can be successfully accessed via

this.$store.state.listingModule // <-- access listingModule

The same is not true for accessing mutations cause when I do this

this.$store.listingModule.commit('REPLACE_LISTINGS', res)

or

this.$store.mutations.listingModule.commit('REPLACE_LISTINGS', res)

I get either this.$store.listingModule or this.$store.mutations undefined error.

Do you know how should the module getters and mutations be accessed?

EDIT

As Jacob brought out, the mutations can be accessed by its unique identifier. So be it and I renamed the mutation and now have access.

here is my mutation:

mutations: {
    REPLACE_OPEN_DASH_LISTINGS(state, payload){
      state.listings = payload
    },
 }

Here is my state

state: {
    listings:[{
      id: 0,
      location: {},
      ...
    }]
}

As I do a commit with a payload of an array the state only saves ONE element. Giving in payload array of 4 it returns me back array of 1.

What am I missing?

Thanks!

this.$store.commit('REPLACE_LISTINGS', res). regardless of module, mutation name must be unique. unless you use namespace — Jacob Goh
Thanks Jacob, how come this command doesn't save any arrays? I feed in an array of 4 and get back an array of 1. Is there a natural limit or its just my code? — KasparTr
Thanks @JacobGoh, please see Edit. I don't understand what am I missing here. — KasparTr
the code seems fine. can you also show the code where you get the data to commit the mutation? — Jacob Goh

Daniel Daniel · Accepted Answer · 2018-05-07T14:36:06

It's a good idea, IMHO, to call vuex actions instead of invoking mutations. An action can be easily accessed without worrying about which module you are using, and is helpful especially when you have any asynchronous action taking place. https://vuex.vuejs.org/en/actions.html

That said, as Jacob pointed out already, mutation names are unique, which is why many vuex templates/examples have a separate file called mutation-types.js that helps organize all mutations.

re. the edit, It's not very clear what the issue is, and I would encourage you to split it into a separate question, and include more of the code, or update the question title.

While I can't tell why it's not working, I would suggest you try using this, as it can resolve two common issues

import Vue from 'vue'
//...
mutations: {
    REPLACE_OPEN_DASH_LISTINGS(state, payload){
      Vue.$set(state, 'listings', [...payload]);
    },
 }

reactivity not triggered. Using Vue.$set() forces reactivity to kick in for some of the variables that wouldn't trigger otherwise. This is important for nested data (like object of an object), because vue does not create a setter/getter for every data point inside an object or array, just the top level.
rest destructuring. Arrays: [...myArray] Objects: {...myObj}. This prevents data from being changed by another process, by assigning the contents of the array/object as a new array/object. Note though that this is only one level deep, so deeply nested data will still see that issue.

How to access Vuex modules mutations

1 Answers