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

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 实例都可以在 this 上调用 $http。（例如 this.$http.get('https://httpbin.org/get')

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

上调用

Answer 2

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

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

语法：

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

示例：

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

In your main.js or 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')

Answer 3

对于所有从零开始实施（没有弃用 vue-resource）的人来说，另一种简单有效的方法是 ""Laravel 方式" 也是。

在 CLI 中运行：npm install axios

在main.js中定义：

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common['Accept'] = 'application/json';

然后你可以像这样在任何组件中使用它：

window.axios.get('https://example.com').then(r => console.log(r.data));

并捕获r.data输出

（如果你使用 Laravel 路由而不是 Vue 的路由，你可以这样使用它：axios.get(url).then(...)

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

use axios globally in all my components vue

vue.js

axios

vue-cli