1

我的 vuex 商店有一个小问题，在应用程序初始化期间未定义。

____ store/index.ts ____

import { createStore, Store, useStore as baseUseStore } from "vuex";
import { InjectionKey } from "vue";
import msalModule, { MsalState } from "./modules/msal-module";
import userModule, { UserState } from "./modules/user-module";

export interface RootState {
    userState: UserState;
    msalState: MsalState;
}

export const store = createStore<RootState>({
    modules: {
        user: userModule,
    },
});

export const key: InjectionKey<Store<RootState>> = Symbol();

export function useStore(): Store<RootState> {
    return baseUseStore(key);
}

___ main.ts ___

import { key, store } from "./store/index";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

const app = createApp(App)
    .use(store, key)
    .use(IonicVue)
    .use(router);

router.isReady().then(() => {
    app.mount("#app");
});

___ store/module/user-module.ts ___

import { Settings } from "@/models/settings";
import { User } from "@/models/user";
import API from "@/services/settings-service";
import { RootState } from "..";
import { ActionContext } from "vuex";

export interface UserState {
    user: User;
}

type Context = ActionContext<UserState, RootState>;

export default {
    namespaced: true,
    state: (): UserState => ({
        user: {
            name: "",
            settings: Object.assign({}),
        },
    }),
    mutations: {
        setUserSettings(state: UserState, settings: Settings) {
            state.user.settings = settings;
        },
    },
    actions: {
        async fetchUserSettingsAsync(context: Context) {
            const userSettings: Settings = await API.getSettings();
            context.commit("setUserSettings", userSettings);
        },  
    },
};

___ API.ts ___
import { store } from "@/store/index";
import apiClient from "@/services/http-common";
import { Settings } from "@/models/settings";
import axios, { AxiosError } from "axios";
class API {
    async getSettings(): Promise<Settings> {
        const response = await apiClient.get("/settings/user/" + store.state.userState.user.username);
        return response;
    }
}

export default new API();

___ http-common.ts ___

import { store } from "@/store";
import axios, { AxiosInstance } from "axios";

function getToken(): string {
    return store.state.userState.user.authentication.accessToken;
}

const apiClient: AxiosInstance = axios.create({
    baseURL: process.env.VUE_APP_BASE_URL,
    headers: {
        "Content-type": "application/json",
        Authorization: "Bearer " + getToken(),
    },
});

export default apiClient;

在 http-common.ts 文件中，应用程序初始化时未定义商店。当应用程序启动时，第一次分派用户模块操作是在我的一个组件内。

我该如何解决这个问题？访问令牌是在 beforeRoute 中设置的，我在其中使用 MSAL 登录用户，但它永远不会到达那一点。

如果我像这样在它周围添加一个 setTimeout ，它就可以工作

function getToken(): any {
    setTimeout(function() {
        return store.state.userState.user.authentication.accessToken;
    }, 2000);
}
4

0 回答 0