javascript - Vuex Store 在 Typescript 类中未定义

Question

我有一个问题，我想将 Typescript 类引用到我的 Vuex 商店。但商店始终是未定义的。

这就是我的商店

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 中设置断点，并在扩展中观察商店的状态时，他已经存在了。

有人可以帮助我吗？

Answer 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尚未初始化，因此它是未定义。