Обертка для axios?

Question

[Богдан]

Здравствуйте. Подскажите пожалуйста, как лучше всего реализовать обертку для axios: импортить в каждый компонент, написать eventBus, Vuex, или засунуть в прототип Vue.
Меня как бы устраивает Vuex, но как бы получается и импортю некоторые переменные с Vuex в обертку http, а потом в Vuex импортю обертку

http.js

import axios from 'axios';

import store from '@/store';

console.log( store )

export const http = axios.create( {
  baseURL: store.state.apiUrl,
  timeout: 1000,
  headers: { 'Authorization': `Bearer ${ store.state.accessToken }` }
} );

store.js

import Vue from 'vue';
import Vuex from 'vuex';

import { http } from './http';

и появляется ошибка

http.js?31b3:8 Uncaught TypeError: Cannot read property 'state' of undefined

Спасибо.

Comments

[Riley Usagi]

Импортю?

Answer 1

[Иван]

В принципе можно импортить в каждый компонент, тем более насколько знаю реально он заимпортит только один раз.
Однако в том же Laravel.Mix, если память не изменяет, Axios прицепляется к window, т.е. просто становится глобальным. Я конечно понимаю, что "Нельзя засерать глобальное пространство и ко-ко-ко ...", но JQuery, loadash, Axios и подобное является исключением из правил.

или засунуть в прототип Vue

В принципе тоже самое что и c window. Если у вас везде Vue и Axios без него не понадобится, можно и так сделать.

Answer 2

[markmariner]

Вам нет необходимости создавать отдельную обёртку http.js

Импортируйте axios в файл store.js и задайте настройки по умолчанию:

import axios from 'axios'

axios.defaults.baseURL = ...

Comments

[Богдан]

ну как бы я там интерцепы делаю, незасорять же стор лышникм кодом