Vuex 4报错Cannot access 'store' before initialization求解

报错本质是两个问题叠加导致的：

1. 模块加载顺序冲突：你在http-common.ts模块初始化阶段就直接导入并读取store，但此时store的初始化逻辑还未执行完成，自然读取为undefined
2. 逻辑时序不匹配：Authorization头的token是用户登录完成后才生成的，你在项目初始化阶段创建axios实例时就固定写入header，就算store初始化成功，这时候也拿不到有效token，后续token更新后axios实例的header也不会自动同步更新

你当前用的setTimeout临时方案存在明显缺陷：一是延迟时间不可控，若登录/ store初始化耗时超过2秒依然会报错；二是setTimeout回调的返回值无法被外层getToken接收，本质只是规避了初始化阶段的报错，实际运行逻辑存在隐患，不建议长期使用。

方案1：使用axios请求拦截器动态注入token（最推荐） #

不要在axios实例创建时就固定Authorization头，改成通过请求拦截器在每次发请求前动态从store取token，既解决初始化顺序问题，也能适配token过期刷新的场景。
修改http-common.ts代码如下：

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

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

// 添加请求拦截器，每次发请求前动态注入token
apiClient.interceptors.request.use((config) => {
    // 加多层兜底判断，避免store未初始化或token未生成的异常场景
    if (store?.state?.userState?.user?.authentication?.accessToken) {
        config.headers.Authorization = `Bearer ${store.state.userState.user.authentication.accessToken}`;
    }
    return config;
}, (error) => {
    return Promise.reject(error);
});

export default apiClient;

方案2：调整API调用逻辑，参数透传所需信息 #

如果你希望service层和状态管理库解耦，也可以把需要从store取的参数从action层透传给API，避免service层直接依赖store。
首先修改API.ts的getSettings方法，接收username作为入参：

import apiClient from "@/services/http-common";
import { Settings } from "@/models/settings";
import axios, { AxiosError } from "axios";
class API {
    async getSettings(username: string): Promise<Settings> {
        const response = await apiClient.get(`/settings/user/${username}`);
        return response;
    }
}

export default new API();

再修改user-module.ts里的action，从context中读取state数据传给API：

actions: {
    async fetchUserSettingsAsync(context: Context) {
        const username = context.state.user.username;
        const userSettings: Settings = await API.getSettings(username);
        context.commit("setUserSettings", userSettings);
    },  
},

这个方案的优势是service层不需要依赖Vuex，后续如果更换状态管理方案也不需要修改API层的代码。

额外优化建议 #

如果还有其他场景需要依赖store初始化完成，可以调整main.ts的导入顺序，优先导入store模块，再导入其他依赖store的业务模块，避免出现模块加载顺序导致的依赖未初始化问题。

内容的提问来源于stack exchange，提问作者Anfield_08