Vuex Store 在 Typescript 类中未定义答案

【问题标题】：Vuex Store is in Typescript Class undefinedVuex Store 在 Typescript 类中未定义
【发布时间】：2018-08-17 09:01:54
【问题描述】：

我有一个问题，我想将一个 Typescript 类引用到我的Vuex Store。但是商店总是不确定的。

这是我的店

import Vue from 'vue';
import Vuex from 'vuex';
import { SessionManager } from '@/classes/worker';
import { User } from '@/classes/user';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user : new User(),
    store : new SessionManager(),
  },
  mutations: {

  },
  actions: {

  },
  getters:{
    getUser : state => {
      return state.user;
    }
  },
});

在我的 SessionManager 类中，我想在构造函数中执行类似的操作

import  store from '@/store';

        export class SessionManager {

        public constructor() {

            let user = store.state.user as User;
            console.log(store);

        }
    }

我有 Chrome 的 Vue 扩展。因此，当我在使用商店之前在 Chrome 中设置了一个断点时，并在他已经存在的扩展程序中观察商店的状态。

有人可以帮我吗？

【问题讨论】：

你能显示console.log(store);的输出吗？
@JulianPaoloDayag 这条线永远不会被击中，因为我收到错误“Uncaught TypeError: Cannot read property 'state' of undefined”。当我只说 let user = store 时，console.log(store) 显示输出“未定义”
你能先把它注释掉吗？只需将store 记录到控制台？
可能是您遇到了 ESM 问题。
@JulianPaoloDayag 所以我也必须用 Typescript 写我的商店？

标签： javascript typescript vue.js vuex

【解决方案1】：

看起来你有一个循环依赖：你的存储文件在调用new Vuex.Store之前调用了new SessionManager()，所以当SessionManager构造函数运行时，存储还没有被创建和导出。我想您应该避免从 SessionManager 构造函数访问商店。我不知道 Vuex，所以应该有另一种方法。

要了解发生了什么，让我们看一下代码的简化版本：

let store;
class SessionManager {
    constructor() {
        console.log(store);
    }
}
let sm = new SessionManager();
store = new Vuex.Store({state: {store: sm, ...}, ...});

new SessionManager()运行的时候，store还没有初始化，所以是undefined。

【讨论】：

感谢您的帮助。我认为创建商店时，会创建 SessionManager 和用户。但不是这样吗？
查看更新后的答案。 Vuex.Store 的构造函数的参数必须在构造函数被调用之前进行评估。因此，SessionManager 是在 Vuex.Store 之前创建的。