网站搜索

typescript - 无法在 Vuex 和 vuex-module-decorators 中实现静态模块加载


我有一个简单的 Vue 应用,其根 Vuex store 中有一个 user 模块。我正在使用 vuex-module-decorators。我已经像 Vuex Nuxt 示例一样设置了 store/store-accessor.ts。它导入了所有模块的 ts 文件,并将 getModule(user) 的结果导出为 userStore。我没有任何 TypeScript 编译问题。

当我启动我的应用程序时,在 HelloWorld 组件中使用 userStore.user.uid,我得到:

TypeError: Cannot read property 'user' of undefined
    at Object.get (index.js?6fc5:121)
    at new HelloWorld (HelloWorld.vue?1d82:17)
    at collectDataFromConstructor (vue-class-component.esm.js?2fe1:97)
    at VueComponent.data (vue-class-component.esm.js?2fe1:172)

该堆栈跟踪在 vuex-module-decorators 的这段代码中结束。我用评论标记了错误位置:

function staticStateGenerator(module, modOpt, statics) {
    var state = modOpt.stateFactory ? module.state() : module.state;
    Object.keys(state).forEach(function (key) {
        if (state.hasOwnProperty(key)) {
            // If not undefined or function means it is a state value
            if (['undefined', 'function'].indexOf(typeof state[key]) === -1) {
                Object.defineProperty(statics, key, {
                    get: function () {
                        // ERROR HERE, modOpt.store.state has no property "user"
                        // modOpt.store looks like the root store, its state is empty.
                        // modOpt.name is "user", the name of my module.
                        return modOpt.store.state[modOpt.name][key]; 
                    }
                });
            }
        }
    });

我是否需要做些什么来将 modOpt.store.state["user"] 设置为 userStore 模块之类的东西?

我创建了一个 GitHub 仓库来展示这个问题:https://github.com/garyo/vuex-problem-test.git 只需克隆该仓库,yarn install 和 yarn serve,你就应该能在 JS 控制台看到错误。