在 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

在 Vue 3 中将其保存在 main.js 中对我来说非常好。

import { createApp } from 'vue';
import App from './App.vue';
import axios from "axios";

const app = createApp(App);

const instance = axios.create({
    baseURL: 'https://example.com/',
  });

app.config.globalProperties.axios=instance

app.mount('#app');

并在任何组件中使用它，

this.axios.post('/helloworld', {
    name: this.name,
    age: this.age
})

Answer 2

您可以创建一个插件并在您的 main.js 文件中像这样使用它（如果您使用的是 vue-cli 之类的东西）

import axios from 'axios'

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

new Vue({
    // your app here
})

现在，您可以对每个组件方法执行this.$api.get(...)

在此处阅读有关 Vue 插件的更多信息：https://vuejs.org/v2/guide/plugins.html

提供/注入也可以是一个选项：https://vuejs.org/v2/api/#provide-inject

Answer 3

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

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