I've been struggling to successfully register a Vuex module. Below is the code I've been working with:
stores/index.js:
import Vuex from 'vuex';
import resourcesModule from './resources';
import axios from '@/helpers/axiosInterceptor';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
resources: resourcesModule
},
state: {...}})
stores/resources/index.js
export default {
state: {
resources: []
},
actions: {
fetchResources(store) {
const request = axios.get('/api/musical_resources');
request.then((res) => {
store.commit('setResources', res.data);;
});
return request;
}
},
mutations: {
setResources(state, payload) {
state.resources = payload;
}
},
getters: {
resources({resources}) {
return resources;
}
}
};
I've attempted to dispatch the fetchResources action from another component, but I keep getting an error stating " [vuex] unknown action type: fetchResources". Upon inspecting the store object, I noticed that only the root property is present under the _modules property, which leads me to believe that I may have missed something during the module registration process.
When I console.log(resourcesModules); in stores/index.js, everything appears to be in order.
Can anyone help me pinpoint the issue? Thank you.
EDIT:
I also attempted the following in stores/index.js:
import Vue from 'vue';
import Vuex from 'vuex';
import axios from '@/helpers/axiosInterceptor';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
resources: {
state() {
return {
resources: []
}
},
actions: {
fetchResources(store) {
const request = axios.get('/api/musical_resources');
request.then((res) => {
store.commit('setResources', res.data);;
});
return request;
}
},
mutations: {
setResources(state, payload) {
state.resources = payload;
}
},
getters: {
resources({ resources }) {
return resources;
}
}
}
},
state: {...}})
Unfortunately, this attempt was also unsuccessful.