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的引用。这可能会创建某种循环引用循环，最终会引发错误。

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

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;

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

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

1 个答案: