导入自定义 axios 实例时 Vuex 模块不起作用

Question

我已经在 Vuex 模块中声明了一个动作：

storeBudgets(store: ActionContext<State, any>) {
    return axiosAuth.get('/budget')
        .then((res) => {
            store.commit('setBudgets', res.data.budgets);
        });
}

其中 axiosAuth 是 axios 的自定义实例：

import axios from 'axios';
import store from './store/index';

const axiosAuth = axios.create({
    baseURL: 'http://localhost:3000',
});


axiosAuth.interceptors.request.use((config) => {
    config.headers['x-access-token'] = store.getters.getUserToken;
    return config;
});

export default axiosAuth;

我在其他 vuex 存储模块中使用这个 axios 实例没有任何问题，但是对于这个特定模块中的这个特定操作，我收到以下错误：

TypeError: rawModule is undefined

一旦我评论了对 axiosAuth 的引用，错误就会消失。

我认为这个问题与我在 axios 拦截器中引用存储的事实有关，因为还注释 config.headers 行会使应用程序加载没有任何问题。

我正在从 TypeScript 代码库中的 JavaScript 项目中迁移此逻辑，并且之前的实现没有任何问题。

• 这与 TypeScript 转译有关吗？
• 我可以使用哪些替代方法而不是拦截器来在我的 HTTP 请求的标头中设置 JWT 令牌？

Answer 1

我认为这里的问题是 TypeScript 如何尝试转换依赖项的导入。

我只是猜测，但我在 axios 文件中引用了存储，并且在 vuex 存储模块之一中引用了 axios。 这可能会创建某种循环引用循环，最终引发错误。

为了解决我的问题，我在创建 vuex 存储后将 axios 拦截器的设置移动到 store.ts 文件中。

import Vue from 'vue';
import Vuex from 'vuex';

import axiosAuth from "@/axios-auth";

Vue.use(Vuex);

const vuexStore = new Vuex.Store({
    state: {

    },
    modules: {
        // ...
    },
});

axiosAuth.interceptors.request.use((config) => {
    config.headers['x-access-token'] = vuexStore.getters.getUserToken;
    return config;
});

export default vuexStore;

我不确定这是否是最干净的解决方案，但我很高兴它解决了我的主要问题。