Модуль Vuex не работает при импорте пользовательского экземпляра axios - PullRequest
Новая
       7

Модуль Vuex не работает при импорте пользовательского экземпляра axios

0 голосов
/ 26 июня 2018

Я объявил действие в модуле 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;

Я использую этот экземпляр axios в других модулях хранилища vuex без каких-либо проблем, но для этого конкретного действия в этом конкретном модуле я получаю следующую ошибку: 

TypeError: rawModule is undefined

Ошибка исчезает, как только я комментирую ссылку на axiosAuth.

Я думаю, что проблема связана с тем, что я ссылаюсь на хранилище в перехватчике axios, так как комментирование строки config.headers делает загрузку приложения без каких-либо проблем.

Я перенес эту логику из проекта JavaScript в кодовую базу TypeScript, и у меня не было проблем с предыдущей реализацией.

  • Это как-то связано с переносом TypeScript?
  • Какие альтернативы я мог бы использовать вместо перехватчика для установки токена JWT в заголовке моих HTTP-запросов?

1 Ответ

0 голосов
/ 26 июня 2018

Я думаю, что проблема здесь в том, как TypeScript пытается передать импорт зависимостей.

Я просто догадываюсь, но у меня была ссылка на хранилище в файле axios и ссылка на axios в одномиз модулей магазина Vuex.Это могло создать некую циклическую референтную петлю, которая заканчивалась выдачей ошибки.

Чтобы решить мою проблему, я переместил настройку перехватчика axios после создания хранилища vuex в файл 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;

Я не уверен, что это самое чистое из возможных решений, но я очень рад, что оно решило мою главную проблему.

...