Javascript 如何在Vue 3中使用Vue.prototype或全局变量？

像标题一样，我想将Axios添加到Vue原型中。因此，当我想使用它时，我可以像

this.$axios

那样使用它，而不是每次都导入它

代码：

//插件/axios.ts
从“axios”导入axios
从“../router/index”导入路由器
常量errorHandle=（）：void=>{}；
const instance=axios.create({
//baseURL:process.env.NODE_env=='development'？''：'
baseURL:'http://localhost:3000',
超时：1000*12
});
instance.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded；字符集=UTF-8'
导出默认实例

从“vue”导入{createApp}
从“./App.vue”导入应用程序
从“./plugins/element”导入installElementPlus
从“./plugins/axios”导入实例
从“./路由器”导入路由器
const app=createApp（app）。使用（路由器）
installElementPlus（应用程序）
//app.config.globalProperties.http=实例
app.config.globalProperties.$axios=instance
app.mount（“#app”）

但是，当我尝试这样使用它时，有一个问题：

this.$axios

TS2339:类型“ComponentPublicInstance”上不存在属性“$axios”。

---

如何解决此问题？

您可以使用

提供

/

注入

或定义全局配置属性，以替换Vue 3中的

Vue.prototype

：

1.（用于合成或选择API） 提供

从“axios”导入axios；
const app=Vue.createApp（app）；
应用程序提供（“$axios”，axios）；//在应用程序创建期间提供给所有组件

注入

合成原料药：

const{inject}=Vue；
...
设置（）{
const$axios=inject（“$axios”）；//在需要它的组件中注入
//$axios.get（…）
}

选项API：

inject:['$axios']，//在需要它的组件中注入

2.（适用于选项API）

从“axios”导入axios；
const app=Vue.createApp（app）；
app.config.globalProperties.$axios=axios；

选项API：

---

注意：这仅适用于选项API。Evan You（Vue创建者）：“

config.globalProperty

是用来复制

Vue.prototype

行为的转义图案。在

设置

函数中，只需导入所需内容或显式使用

提供

注入即可将属性公开给应用程序。”

有一种方法可以在设置函数中使用

全局属性。虽然这可能被认为是一种反模式。如果可能，最好使用提供/注入。但是，如果有一个库使用GlobalProperty，并且您确实需要从安装程序访问它，那么您可以这样做


从“vue”导入{getCurrentInstance}
const app=getCurrentInstance（）
const progressBar=app.appContext.config.globalProperties.$Progress
progressBar.start（）

this.$axios