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

Posted 2023-02-22

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

【英文标题】：How to correctly import Axios in vue 3 after creating new project with CLI?

【发布时间】：2021-01-23 22:01:42

【问题描述】：

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

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？

【参考方案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')

demo

【讨论】：

@RizaKhan 从技术上讲，最初的问题与 Composition API 无关（应该删除该标签），所以我不会在这里更新演示。在任何情况下，我都会在需要的地方（包括在 Composition API 中）简单地导入 axios，而不是使用 vue-axios。

【参考方案2】：

您只能导入 axios 并定义为 global property ：

使用打包工具（vue cli、vite 或 webpack ...）：

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

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

选项接口：

this.axios.get(...)

组合api：

import  getCurrentInstance  from 'vue'

const MyComponent = 
  setup() 
    const internalInstance = getCurrentInstance()

    const axios =internalInstance.appContext.config.globalProperties.axios;

   ....