在 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/'
})
}
})
new Vue({
// your app here
})

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

在这里阅读更多关于 Vue 插件的信息： https://v2.vuejs.org/v2/guide/plugins.html

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

Answer 2

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

在主文件中.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;

现在在你的组件中.vue

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

这基本上就是我在项目中全局使用 axios 的方式。此外，这也是拉拉维尔使用它的方式。

Answer 3

在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
})