I'm having trouble accessing mutations and states after dividing my Vuex store into three modules. I've attempted various syntaxes, but none seem to be working for me.
MapStates: This is how I have set up the mapStates, with 'vendor' and 'root' as the module names.
...mapState({
vendor: state => state.vendor.vendor,
language: state => state.root.language
})
and using it like this:
console.log(this.vendor);
MapMutations: I believe I have correctly set up the mapMutations.
methods: {
...mapMutations('vendor', ['UPDATE_VENDOR', 'SET_VENDOR_APISTATE'])
}
and trying to access it like this:
this.$store.commit('UPDATE_VENDOR', response.data);
or
this.UPDATE_VENDOR(response.data);
None of these methods are working for me and I can't identify what mistake I might be making.
This is how my store is structured:
import vendorModule from './vendor/vendorModule';
const store = new Vuex.Store({
modules: {
customer: customerModule,
root: rootModule,
vendor: vendorModule
}
});
with modules structured 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 have realized that my modules were structured incorrectly, as Kelvin Omereshone pointed out, I used the incorrect syntax:
this.$store.commit('vendor/UPDATE_VENDOR', response.data);The correct 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
};