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

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

注意：当 Vue 模块作为包安装并且不通过 CDN 使用时，这种方法可以正常工作，否则如果从 CDN 导入 Vue 那么我们有两个选项，第一个是这里的答案，第二个是导入 Vue 然后main.js使用Vue.prototype.{variable}=Axios

对于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')