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 SessionManager()之前先调用new Vuex.Store，因此，在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。

Vuex Store在Typescript类中未定义

1 个答案: