如何在 main.js 中使用 Axios

Question

我正在学习 Vue.js。

我的代码运行良好：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App).use(store).use(router)

app.mount('#app')

现在我想添加一些导入，例如“axios”。此代码不运行：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

const app = createApp(App).use(store).use(router).use(axios)

app.mount('#app')

错误是：

Uncaught RangeError: Maximum call stack size exceeded

    at merge (utils.js?c532:276)
    at assignValue (utils.js?c532:282)
    at forEach (utils.js?c532:253)
    at merge (utils.js?c532:291)
    at assignValue (utils.js?c532:282)
    at forEach (utils.js?c532:253)
    at merge (utils.js?c532:291)
    at assignValue (utils.js?c532:282)
    at forEach (utils.js?c532:253)
    at merge (utils.js?c532:291)

那么如何在 main.js 文件中添加一些其他的“使用”？这当然非常基础，但我是初学者。

Answer 1

您使用的是 vue 3，而 axios 不是插件（我们不能像 app.use() 那样注册它）它是一个 javascript 模块，可以添加到应用程序实例中，例如：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

const app = createApp(App).use(store).use(router)

app.config.globalProperties.axios=axios

app.mount('#app')

在子组件中像这样引用它：

this.axios

注意：

由于您是 Vue 世界的新手，请尝试学习 Vue，因为它很稳定，并且大多数 ui 库和插件都基于它。

如果您想使用 vue 2，请查看 @flame 的其他答案。

Answer 2

注意：以下代码适用于 Vue 2.x。从版本 3 开始，一些关于初始化的内容发生了变化（现在需要createApp 函数）。

我通常在我的代码中执行以下操作：

import Vue from 'vue';
import axios from 'axios';

// Add it to Vue prototype (use any variable you like, preferrably prefixed with a $).
Vue.prototype.$http = axios;

// Instantiate the main vue app.
let app = new Vue({
  //
});

这意味着$http 对象现在可以在所有使用this.$http 的组件中使用。由于它被分配为原型变量，因此它被认为是一个单例（它在任何地方都可以重复使用），因此您可以在将axios 变量分配给Vue.prototype.$http 之前添加您需要的任何选项。

另外： Vue.use() 专门用于启用 Vue 插件。这意味着给定参数必须使用此处描述的确切语法 https://vuejs.org/v2/guide/plugins.html 。由于 axios 不是一个 Vue 插件，而只是一个普通的 JavaScript 库，所以不能和这个函数一起使用。

如果你想让它特别好（或复杂），你可以使用以下语法：

Vue.use({
    install(v) {
        v.prototype.$http = axios;

        // Do other stuff like adding mixins etc.
    }
})

如果您将此代码移动到另一个文件，这可能会清除您的代码，因此它可能会像这样结束：

import myCustomAxiosLoader from './bootstrap/axios';
Vue.use(myCustomAxiosLoader);