Vue 3 - 全局 axios 实例

Question

我想axios在我的 Vue 3 应用程序中创建一个全局可用的实例。

\n

设置：

\n

import { createApp } from \'vue\'\nimport axios from \'axios\'\n\nconst axiosInstance = axios.create({\n  withCredentials: true,\n})\n\nconst app = createApp()\n\napp.config.globalProperties.$axios = axiosInstance\n\napp.mount(el)\n

\n

用法：

\n

let response = await this.$axios.get(\'/api/leads\')\n

\n

我收到此错误：

\n

TypeError: this.$axios.get is not a function\n

\n

好像this.$axios是undefined。我不明白为什么。

\n

笔记：

\n

\n
1. 我正在使用@vue/compatVue 的构建从 Vue 2 迁移到 Vue 3。我正在遵循官方迁移指南。
\n
2. 检查时this.$axios- 我得到\xc6\x92 wrap() ......
\n

\n

Answer 1

该问题是由一个已知​​的 bug引起的，其中函数属性（ 的结果axios.create()实际上是一个函数）绑定到组件实例代理，这无意中隐藏了函数自己的附加属性（即$axios.get在本例中）。修复该问题的 PR尚未合并。

解决方法是axiosInstance使用扩展运算符将（函数）转换为对象：

const axiosInstance = axios.create({
  withCredentials: true,
})

const app = createApp()
                                        
app.config.globalProperties.$axios = { ...axiosInstance }

演示