使用CLI创建新项目后，如何在vue 3中正确导入Axios

Question

我使用创建了一个新项目

vue create hello-world

生成包含HelloWorld.vue、app.vue、main.js(等等(文件的新项目。

现在我通过以下文档安装Axios Npm vue Axios：

npm install --save axios vue-axios

我在main.js文件中导入Axios：

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

现在我遇到了一个我不理解的问题。VueAxios文档说你只是这样使用它：

const app = Vue.createApp(...)
app.use(VueAxios, axios)

但是在Vue 3中创建app的方式不同。我认为这就是问题的来源：

createApp(App).mount('#app')

那么，如何正确导入axios？

Answer 1

createApp(App).mount('#app')实际上与相同

import Vue from 'vue'
const app = Vue.createApp(App)
app.mount('#app')
// or
import { createApp } from 'vue'
const app = createApp(App)
app.mount('#app')

因此，按照Vue Axios的文档，只需插入app.use():的行

import { createApp } from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
const app = createApp(App)
app.use(VueAxios, axios) // 👈
app.mount('#app')

你也可以这样链：

createApp(App).use(VueAxios, axios).mount('#app')

演示

Answer 2

您只能导入axios并将其定义为全局属性：

使用bundler(vue-cli、vite或webpack…(：

import { createApp } from 'vue'
import axios from 'axios'
const app = createApp(...)
app.config.globalProperties.axios=axios

然后在任何子组件中使用它，如：

选项api：

this.axios.get(...)

在组合api中，我建议直接导入它，如：

import axios from 'axios'
const MyComponent = {
setup() {
//use axios here
.... 
}
}

或者使用vueuse中的useAxios(vue合成实用程序(：

import { useAxios } from '@vueuse/integrations/useAxios'
...
setup() {
const { data, isFinished } = useAxios('/api/posts')
}

Answer 3

这对我在VueJS 3的工作很有效。

npm i vue-axios
import { createApp } from "vue";
import axios from 'axios'
import VueAxios from 'vue-axios'
const app = createApp(App);
app.use(VueAxios)
app.use(axios)
app.mount("#app");

this.axios.get(api).then((response) => {
console.log(response.data)
})

文档链接：https://www.npmjs.com/package/vue-axios