开发者问题收集

如何在 main.js 中使用 Axios

2020-11-20
7638
vue.js axios vuejs3

我正在学习 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 文件中添加一些其他“用途”？这当然非常基础，但我是初学者。

2个回答

您正在使用 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
Boussadjra Brahim
2020-11-20

注意：以下代码适用于 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://v2.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);
Flame
2020-11-20