Vue.js Vuex:[Vuex]在mapState()中找不到模块命名空间| mapGetters():X/
根据Vuex文档中组织存储模块()的内容,我有以下内容:Vue.js Vuex:[Vuex]在mapState()中找不到模块命名空间| mapGetters():X/,vue.js,vuex,Vue.js,Vuex,根据Vuex文档中组织存储模块()的内容,我有以下内容: 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: ["er
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
}
});
我觉得这一切看起来都很好
但是,在component.Vue
中,当I…mapState为:
import { mapState } from 'vuex';
export default {
name: "MyComponent",
// Computed Properties:
computed: {
...mapState('surfGroups', [
'creatingSurfGroupLoading',
]),
},
// Component Watchers:
watch: {
creatingSurfGroupLoading() {
console.log(this.creatingSurfGroupLoading);
},
},
};
我收到以下错误:
[vuex]模块命名空间在mapState()中找不到:surfGroups/
我到底做错了什么?通过阅读文档,我可以看到任何明显的描述?您还没有设置名称空间
const surfGroups = {
namespaced: true,
...
来源:这表明,您正在从应用程序的某个地方呼叫:
mapState("XYZ..")
//or
magGetters("XYZ..")
//or
this.$store.dispatch('XYZ/myFunc'...
this.$store.commit('XYZ/myFunc'...
而您尚未将商店的模块XYZ
定义为“名称空间”。为此,在模块导出中,添加namespaced:true
:
//XYZ.js
export default {
namespaced: true,
...
getters:{
myFunc: state => {
return "HELLO";
}
}
mutations,
actions,
};
因此,不需要在Vuex.Store({..})
中直接进行更改。它将自动将该模块识别为名称空间
p、 同时检查在
Vuex.Store()
creation()中声明的命名空间键名是否正确,如:
Vuex.Store({
modules:{
abc: XYZ <---- i.e. key name should be `XYZ` , that matters mostly.
}
})
Vuex.Store({
模块:{
abc:XYZ-Hmmmm,我不认为这是你的错,但现在没有出错,但不幸的是状态没有映射。废话,我有一个类型。谢谢@artoju!