为什么我在添加 Vuex 模块时得到 "rawModule is undefined"?
Why am I getting "rawModule is undefined" when adding Vuex modules?
我最近第一次在 Vuex 中实现模块时遇到了困难。我找不到关于我收到的控制台错误消息 ( rawModule is undefined
) 的太多信息,所以我想我会分享我 运行 遇到的问题和解决方案。在处理一些示例时,我正在做一个快速、简单的模块实现版本:
export const store = new Vuex.Store({
state: {
loggedIn: false,
user: {},
destination: ''
},
mutations: {
login: state => state.loggedIn = true,
logout: state => state.loggedIn = false,
updateUser: ( state, user ) => { state.user = user },
updateDestination: ( state, newPath ) => { state.destination = newPath }
},
modules: {
project
},
});
const project = {
state: {}
}
问题最终是我声明了我的模块在我试图将它添加到 Vuex 商店之后。由于变量提升,我原以为稍后声明模块是可以的,但事实并非如此。这是有效的代码:
const project = {
state: {}
}
export const store = new Vuex.Store({
state: {
loggedIn: false,
user: {},
destination: ''
},
mutations: {
login: state => state.loggedIn = true,
logout: state => state.loggedIn = false,
updateUser: ( state, user ) => { state.user = user },
updateDestination: ( state, newPath ) => { state.destination = newPath }
},
modules: {
project
},
});
希望这能为一些人节省一些时间。我在文档中没有看到任何需要特定顺序的内容,所以我很惊讶它很重要。如果有人对它以这种方式工作的原因有所了解,我真的很想听听!可能是因为在设置project
值之前调用了Vuex.Store()
函数,所以项目模块的值被封装为undefined
,导致错误?
如果你有使用 class 组件,将商店导入放在模块导入之前,例如:
// This is wrong
import { getModule } from "vuex-module-decorators";
import AppModule from "@/store/app-module";
import store from "@/store";
const appModule = getModule(AppState, store);
// This work
import { getModule } from "vuex-module-decorators";
import store from "@/store"; // Before first
import AppModule from "@/store/app-module"; // Then import the module
const appModule = getModule(AppState, store);
我最近第一次在 Vuex 中实现模块时遇到了困难。我找不到关于我收到的控制台错误消息 ( rawModule is undefined
) 的太多信息,所以我想我会分享我 运行 遇到的问题和解决方案。在处理一些示例时,我正在做一个快速、简单的模块实现版本:
export const store = new Vuex.Store({
state: {
loggedIn: false,
user: {},
destination: ''
},
mutations: {
login: state => state.loggedIn = true,
logout: state => state.loggedIn = false,
updateUser: ( state, user ) => { state.user = user },
updateDestination: ( state, newPath ) => { state.destination = newPath }
},
modules: {
project
},
});
const project = {
state: {}
}
问题最终是我声明了我的模块在我试图将它添加到 Vuex 商店之后。由于变量提升,我原以为稍后声明模块是可以的,但事实并非如此。这是有效的代码:
const project = {
state: {}
}
export const store = new Vuex.Store({
state: {
loggedIn: false,
user: {},
destination: ''
},
mutations: {
login: state => state.loggedIn = true,
logout: state => state.loggedIn = false,
updateUser: ( state, user ) => { state.user = user },
updateDestination: ( state, newPath ) => { state.destination = newPath }
},
modules: {
project
},
});
希望这能为一些人节省一些时间。我在文档中没有看到任何需要特定顺序的内容,所以我很惊讶它很重要。如果有人对它以这种方式工作的原因有所了解,我真的很想听听!可能是因为在设置project
值之前调用了Vuex.Store()
函数,所以项目模块的值被封装为undefined
,导致错误?
如果你有使用 class 组件,将商店导入放在模块导入之前,例如:
// This is wrong
import { getModule } from "vuex-module-decorators";
import AppModule from "@/store/app-module";
import store from "@/store";
const appModule = getModule(AppState, store);
// This work
import { getModule } from "vuex-module-decorators";
import store from "@/store"; // Before first
import AppModule from "@/store/app-module"; // Then import the module
const appModule = getModule(AppState, store);