代码之家 › 专栏 › 技术社区 › Vektor88

导入自定义Axios实例时Vuex模块不工作

vuex axios vue.js typescript

Vektor88 · 技术社区 · 6 年前

我已在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项目迁移此逻辑,并且前一个实现没有任何问题。

这是不是和字体转换有关?
我可以使用哪些替代方法来代替拦截器来设置http请求头中的jwt令牌?

1 回复 | 直到 6 年前

Vektor88 6 年前

我认为这里的问题是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;

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

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前