无法在 Axios 拦截器中获取 Vuex 存储

Question

访问 Vuex 存储时 Axios 初始化错误

import stores from '../stores';

const axios = require('axios');
const { message } = require('ant-design-vue');
const { MARKET_PLACE_API } = require('../../config');

const config = {
  baseURL: `${MARKET_PLACE_API}/api/v1`,
  timeout: 30000,
};

const marketPlateAPI = axios.create(config);

marketPlateAPI.interceptors.response.use(
  (response) => {
    return response;
  },
  async (error) => {
    if (error.code === 'ECONNABORTED') message.error('Timeout Request!');
    if (error.response && error.response.data.code === '002') {
      message.error('Unauthorized!');
      console.log('stores: ', store);
      await stores.dispatch('auth/logout');
    }

    return Promise.reject(error);
  },
);

export default { marketPlateAPI };

我不知道为什么我认为正确导入它

我的vue存储文件：

import Vue from 'vue';
import Vuex from 'vuex';
import authStores from './auth.stores';
import appStores from './app.stores';
import uploadMainStores from './uploadMain';
import orderStores from './order.stores';
import supplierStore from './supplier.stores';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    auth: authStores,
    app: appStores,
    uploadMain: uploadMainStores,
    order: orderStores,
    supplier: supplierStore,
  },
});

export default store;

并且 authStore 有注销操作：

  actions: {
    ...
    async logout({ commit, state }) {
      clearTimeout(state.timeoutID);
      await commit('deleteToken', {});
      await router.push({ name: 'SignIn' });
    },
   }

我正在分配给 Vue 实例

new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App),
}).$mount('#app');

为什么我不能在这个拦截器中使用我的突变，是什么导致了问题以及如何解决它？

Answer 1

我建议你全局导入 Axios：

// app.js
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
axios.defaults.withCredentials = true;