Я не могу понять, как получить доступ к мутациям и состояниям после разделения моего хранилища vuex на три модуля. Я пробовал разные синтаксисы и не знаю, чему следовать.
MapStates: Вот как я настроил mapStates, vendor и root - имена модулей.
...mapState({
vendor: state => state.vendor.vendor,
language: state => state.root.language
})
и использую его следующим образом:
console.log(this.vendor);
MapMutations: Думаю, я правильно настроил mapMutations.
methods: {
...mapMutations('vendor', ['UPDATE_VENDOR', 'SET_VENDOR_APISTATE'])
}
и получил доступ к нему следующим образом:
this.$store.commit('UPDATE_VENDOR', response.data);
или
this.UPDATE_VENDOR(response.data);
Мне кажется, что ни один из них не работает, и я не могу понять, что делаю неправильно.
Мой магазин выглядит так:
import vendorModule from './vendor/vendorModule';
const store = new Vuex.Store({
modules: {
customer: customerModule,
root: rootModule,
vendor: vendorModule
}
});
с такими модулями:
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 Я понял, что мои модули неправильно структурированы. и, как писал Кельвин Омерешон, я использовал здесь неправильный синтаксис: this.$store.commit('vendor/UPDATE_VENDOR', response.data);
.
Структура рабочего модуля:
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
};