Question

我正在使用Vue应用程序和CLI中的axios进行测试。我一直在使用vue-resource，我可以通过简单地将它传递给Vue.use（VueResource）来访问我的所有组件。我如何用axios实现这一点，所以我不必将它导入组件，只需在main.js文件中定义一次？

Answer 1

在main.js中，您只需将Axios分配给$ http。

main.js

import Axios from 'axios'

Vue.prototype.$http = Axios;

通过修改vue原型，任何vue实例都可以在$http上调用this。（例如this.$http.get('https://httpbin.org/get')

注意：$http现在是axios对象，因此您可以在axios对象上调用的任何方法都可以调用this.$http。

Answer 2

对于 VUE3，您需要添加以下代码：

语法：

app.config.globalProperties.{variable} = value;

示例：

app.config.globalProperties.$http = Axios; // Allow axios in all componenets this.$http.get

<块引用>

在你的 main.js 或 app.js

/**
 * Importing libraries & componenets
 */
import { createApp } from 'vue';
import { createWebHistory, createRouter } from 'vue-router';
import Axios from 'axios';

/**
 * Vue initialization
 */
const app = createApp({
    components: { 
        Index 
    },
});

app.use(router);
app.config.globalProperties.$http = Axios; // Allow axios in all componenets this.$http.get
app.mount('#app');

您可以在组件中调用与 VUE2 相同的 GET 方法：this.$http.get('https://httpbin.org/get')

在我的所有组件中全局使用axios vue

2 个答案: