Following from the Vuex documentation for organising the store modularly (https://vuex.vuejs.org/guide/modules.html), I have the following in:
store/index.js
:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
// Default Store State for the Hug Employee Dashboard:
// import defaultState from "@/store/defaultStore";
/*eslint no-param-reassign: ["error", { "props": false }]*/
/*eslint indent: ["error", 2]*/
/*eslint arrow-body-style: ["error", "always"]*/
/*eslint-env es6*/
const surfGroups = {
state: {
activeSurfGroup: {},
fetchingSurfGroupLoading: false,
creatingSurfGroupLoading: false
},
getters: {
activeSurfGroup: state => {
return state.activeSurfGroup;
},
},
mutations: {
// API Request Mutations:
SET_ACTIVE_SURF_GROUP(state, payload) {
this.activeSurfGroup = payload;
},
// Loading Mutations:
SET_FETCHING_SURF_GROUP_LOADING(state, payload) {
state.fetchingSurfGroupLoading = payload;
},
SET_CREATING_SURF_GROUP_LOADING(state, payload) {
state.creatingSurfGroupsLoading = payload;
}
},
actions: {
fetchSurfGroup: async ({ commit }, payload) => {
commit("SET_FETCHING_SURF_GROUP_LOADING", true);
// Dispatches the following Surf Levels API service:
// this.$surfLevelsAPI.fetchActiveSurfGroup(
// payload.activeSurfGroupUUID
// );
await Vue.prototype.$surfLevelsAPI.fetchActiveSurfGroup(payload).then((response) => {
if (response.success) {
commit("SET_ACTIVE_SURF_GROUP", response.data);
commit("SET_FETCHING_SURF_GROUP_LOADING", false);
}
});
},
createSurfGroup: async ({ commit }, payload) => {
commit("SET_CREATING_SURF_GROUP_LOADING", true);
// Dispatches the following Surf Levels API service:
// this.$surfLevelsAPI.createNewSurfGroup(
// payload.activeSurfInstructor, payload.activeSurfSessionSelected, payload.activeGroupSurfers
// );
await Vue.prototype.$surfLevelsAPI.createNewSurfGroup(payload).then((response) => {
if (response.success) {
commit("SET_CREATING_SURF_GROUP_LOADING", false);
}
});
}
}
};
export default new Vuex.Store({
modules: {
surfGroups: surfGroups
}
});
I feel like this all looks good.
However, within component.Vue
, when I ...mapState as:
import { mapState } from 'vuex';
export default {
name: "MyComponent",
// Computed Properties:
computed: {
...mapState('surfGroups', [
'creatingSurfGroupLoading',
]),
},
// Component Watchers:
watch: {
creatingSurfGroupLoading() {
console.log(this.creatingSurfGroupLoading);
},
},
};
I receive the following error:
[vuex] module namespace not found in mapState(): surfGroups/
What exactly have I done wrong? I can see any obvious descrepancies from reading through the docs?
You haven't set namespace.
const surfGroups = {
namespaced: true,
...
Source: https://vuex.vuejs.org/guide/modules.html#namespacing
This is an indication, that from somewhere of your app, you are calling:
mapState("XYZ..")
//or
magGetters("XYZ..")
//or
this.$store.dispatch('XYZ/myFunc'...
this.$store.commit('XYZ/myFunc'...
while you haven't defined the Store's module XYZ
as "namespaced". To do that, in the module export, add the namespaced:true
:
//XYZ.js
export default {
namespaced: true,
...
getters:{
myFunc: state => {
return "HELLO";
}
}
mutations,
actions,
};
So, no change is needed inside Vuex.Store({..})
directly. It will automatically recognize that module as namespaced
.
p.s. also check if your namespace key name declared in Vuex.Store()
creation, is correct, like:
Vuex.Store({
modules:{
abc: XYZ <---- i.e. key name should be `XYZ` , that matters mostly.
}
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With