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
};

Answer 1

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 /