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

Posted 2023-02-22

【中文标题】导入自定义 axios 实例时 Vuex 模块不起作用

【英文标题】：Vuex module not working when importing a custom axios instance

【发布时间】：2018-12-04 18:30:53

【问题描述】：

我已经在 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 令牌？

【问题讨论】：

其余的错误在哪里？你在哪里尝试使用rawModule？

@Phil 是错误，而 rawModule 是 Vuex/Vuejs 代码内部的东西。

【参考方案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;

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

【讨论】：

干得好，基本上解决这个问题的基本原理是将任何引用商店的代码放在 store.ts 本身中。我再次觉得某处可能有更清洁的解决方案

@ExisZhang 找到更干净的解决方案了吗？