Vuex Store在Typescript类中未定义

Question

I have the problem, that I want to refer a Typescript class to my Vuex Store. But the store is always undefined.

So this is my 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;
    }
  },
});

And in my SessionManager class I want to do something like this in the constructor

import  store from '@/store';

        export class SessionManager {

        public constructor() {

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

        }
    }

I have the Vue-Extensions for Chrome. So when I set a Break point in Chrome in the line before I use the store, and watch the state of the store in the extension he already exist.

Can someone help me?

Answer 1

It looks like you have a cyclic dependency: your store file is calling new SessionManager() before it calls new Vuex.Store , so when the SessionManager constructor runs, the store has not yet been created and exported. I guess you should avoid accessing the store from the SessionManager constructor. I don't know Vuex, so there may be another way this is supposed to be done.

To understand what is happening, let's look at a simplified version of the code:

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

At the time new SessionManager() runs, store has not been initialized yet, so it is undefined .