создать глобальную конфигурацию Axios и добавить ее в экземпляр Vue

Question

Я добавил Axios в свое приложение Vue через установку зависимостей пользовательского интерфейса Vue.Я хотел бы получить доступ к Axios в моих компонентах, используя

this.$http.myHTTPmethod

Поэтому я создал http.js на основе этой документации

https://github.com/axios/axios#axioscreateconfig

import axios from "axios";

const devInstance = createInstance("http://localhost:3000");
const productionInstance = createInstance("http://localhost:3000"); // will change later

function createInstance(baseURL){
    return axios.create({
        baseURL,
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.token}`
        }
    });
}

export default devInstance; // Check debug/build mode

Мой вопрос:

Как мне заставить axios использовать этот экземпляр axios?И как я могу получить доступ к этому экземпляру через this.$http, как если бы я использовал Vue-Router (this.$router)?

Answer 1

Вы могли бы создать плагин:

import axios from "axios";
import Vue from 'vue'

const devInstance = createInstance("http://localhost:3000");
const productionInstance = createInstance("http://localhost:3000"); // will change later

function createInstance(baseURL){
    return axios.create({
        baseURL,
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.token}`
        }
    });
}

export default {
    install () {
        Vue.prototype.$http = devInstance
    }
}; // Check debug/build mode

И затем ваш плагин в ваш файл main.js, прежде чем создавать ваш основной экземпляр Vue, например:

import Vue from 'vue'
import http from './plugins/http.js'

Vue.use(http)
...

Делаяпри этом вы получите доступ к своему экземпляру axios из ваших компонентов, используя this.$http