Using mapState and mapMutations from a namespaced module

Question

I can't figure out how to access mutations and states after having split my vuex store into three modules. I've tried different syntaxes and I'm not sure what to follow.

MapStates: This is how I've set up the mapStates, vendor and root are the module names.

...mapState({
  vendor: state => state.vendor.vendor,
  language: state => state.root.language
})

and use it like this:

console.log(this.vendor);

MapMutations: I think I've set up the mapMutations correctly.

methods: {
  ...mapMutations('vendor', ['UPDATE_VENDOR', 'SET_VENDOR_APISTATE'])
}

and accessing it like this:

this.$store.commit('UPDATE_VENDOR', response.data);

or

this.UPDATE_VENDOR(response.data);

None of these seem to work for me and I can't figure out what I'm doing wrong.

My store looks like this:

import vendorModule from './vendor/vendorModule';

const store = new Vuex.Store({
  modules: {
    customer: customerModule,
    root: rootModule,
    vendor: vendorModule
  }
});

with modules like this:

const vendorModule = {
  namespaced: true,
  state: () => ({
    vendor: null,
    vendorApiState: ENUM.INIT
  }),
  mutations: {
    UPDATE_VENDOR(state, vendor) {
      state.vendor = vendor;
      state.vendorApiState = ENUM.LOADED;
    }
  }
};

export default {
  vendorModule
};

EDIT I realised that my modules where structured wrong. and as Kelvin Omereshone wrote I used the wrong syntax here: this.$store.commit('vendor/UPDATE_VENDOR', response.data);.

The working module structure is:

const state = () => ({
  vendor: null,
  vendorApiState: ENUM.INIT
});

const mutations = {
  UPDATE_VENDOR(state, vendor) {
    state.vendor = vendor;
    state.vendorApiState = ENUM.LOADED;
  }
};

export default {
  namespaced: true,
  state,
  mutations
};

score 2 · Accepted Answer · answered Jun 16 '20 at 08:29

2

If you want to use this.$store.commit('UPDATE_VENDOR', response.data);. No need for mapMutations. Just use it like so:

this.$store.commit('vendor/UPDATE_VENDOR', response.data);

Note: the module name comes before the Mutation name separated by a forward slash /

answered Jun 16 '20 at 08:29

Kelvin Omereshone

726
3
13

I get the error `[vuex] unknown mutation type: vendor/UPDATE_VENDOR`. Would you happen to know why that might be? – Alvin Johansson Jun 16 '20 at 08:46
Please check if the module name is indeed `vendor` and the mutation name is indeed `UPDATE_VENDOR` and you set `namespaced: true` on it. – Kelvin Omereshone Jun 16 '20 at 08:52
Yes they all seem to be correct. I feel like my modules might be structured wrong or something like that. – Alvin Johansson Jun 16 '20 at 09:08
Yeah looking at your code, your module state should be a function that returns an object. Try following this. https://vuex.vuejs.org/guide/modules.html. I am here if you need anything. – Kelvin Omereshone Jun 16 '20 at 09:40
I got it to work by moving the contents of the module directly into the my store.js but that kinda defeats the purpose of splitting up the code. Seems like I've done something wrong when I have them in a separate file. I updated my question with the remainder of the module (the export) and fixed the state should be a function. It looks correct to me but It's apparently not. – Alvin Johansson Jun 16 '20 at 11:30
I ran into this question and I'm wondering, did you figure things out? I have something similar to this, and to use mapMutations, I did: ...mapMutations({ updateVendor: "vendor/UPDATE_VENDOR" }), then did this.updateVendor(response.data); Hope it helps. – Dean Mar 01 '21 at 06:44

Using mapState and mapMutations from a namespaced module

1 Answers1