在Vuejs中全局导入Axios方法

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文件中使用它(如果你使用像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

Answer 2

浏览器中有一个窗口对象可供您使用。您可以根据自己的要求积极利用它。

在 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 使用它的方式。