사용자 지정 Axios 인스턴스를 가져올 때 Vuex 모듈이 작동하지 않음

사용자 지정 Axios 인스턴스를 가져올 때 Vuex 모듈이 작동하지 않음

Vuex 모듈에서 액션을 선언했습니다.

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

여기서 axios는Auth는 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

공리에 대한 언급을 하자마자 오류가 사라집니다.인증.

이 문제는 악시오스 인터셉터에 있는 스토어를 참조하고 있다는 사실과 관련이 있다고 생각합니다.왜냐하면 이 스토어에 대한 코멘트도 있기 때문입니다.config.headersline을 사용하면 어플리케이션이 문제없이 로딩됩니다.

이 로직은 TypeScript 코드베이스의 JavaScript 프로젝트에서 이행하고 있으며 이전 구현에서는 문제가 없었습니다.

• 이것은 TypeScript 전사와 관련된 것입니까?
• 인터셉터 대신 어떤 대안을 사용하여 HTTP 요청 헤더에 JWT 토큰을 설정할 수 있습니까?

여기서의 문제는 TypeScript가 의존관계의 Import를 전위화하려고 하는 방법이라고 생각합니다.

추측하고 있습니다만, 악시오스 파일에 있는 스토어와 vuex 스토어 모듈 중 하나에 있는 악시오에 대한 참조가 있었습니다.이로 인해 일종의 순환 참조 루프가 생성되어 오류가 발생할 수 있습니다.

이 문제를 해결하기 위해 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;

이것이 가장 깨끗한 해결책인지는 모르겠지만, 그것이 나의 주된 문제를 해결했기 때문에 저는 매우 기쁩니다.

언급URL : https://stackoverflow.com/questions/51036048/vuex-module-not-working-when-importing-a-custom-axios-instance