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

Question

我使用以下方法创建了一个新项目：

 vue create hello-world

生成一个包含 HelloWorld.vue 、 app.vue 、 main.js （等等）文件的新项目。

现在我按照文档 Npm vue-axios 安装 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 ？

原文由 RDU 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

演示

原文由 tony19 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

使用捆绑器（vue cli、vite 或 webpack …）：

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

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

选项 api ：

 this.axios.get(...)

在 Composition api 中，我建议直接导入它，例如：

 import axios from 'axios'

const MyComponent = {
  setup() {
    //use axios here

   ....
  }
}

或者您使用来自 vueuse （vue 组合实用程序）的 useAxios ：

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

原文由 Boussadjra Brahim 发布，翻译遵循 CC BY-SA 4.0 许可协议