Глобальный импорт метода Axios в Vuejs

Question

это мой ~ / plugins / axios.js файл:

import axios from 'axios'

let api = axios.create({
  baseURL: 'http://localhost:8000/api/v1/'
})

export default api

Когда я хочу использовать axios в каждом компоненте, я должен написать следующую строку:

import api from '~/plugins/axios

Как я могу настроить его глобально, просто вместо этого напишите $ api?

Answer 1

В браузере доступен объект окна. Вы можете активно использовать это на основе ваших требований.

В файле main.js

import axiosApi from 'axios';

const axios = axiosApi.create({
    baseURL:`your_base_url`,
    headers:{ header:value }
});

//Use the window object to make it available globally.
window.axios = axios;

Теперь в вашем component.vue

methods:{
    someMethod(){
        axios.get('/endpoint').then(res => {}).catch(err => {});
    }
}

Это в основном то, как я использую axios глобально в моих проектах. Кроме того, это также, как Laravel

Answer 2

Вы можете создать плагин и использовать его в своем файле main.js (если вы используете что-то вроде vue-cli)

import axios from 'axios'

Vue.use({
    install (Vue) {
    Vue.prototype.$api = axios.create({
      baseURL: 'http://localhost:8000/api/v1/'
    })
  }
})

new Vue({
    // your app here
})

Теперь вы можете использовать this.$api.get(...) на каждомметод компонента

Подробнее о плагинах Vue можно узнать здесь: https://vuejs.org/v2/guide/plugins.html

Предоставить / ввести также может быть вариант: https://vuejs.org/v2/api/#provide-inject