Javascript 在Vue.js 3中添加全局变量

有人知道如何在Vue 3中添加全局变量吗

在Vue 2中，我们在

main.js

文件中使用此选项：

Vue.prototype.$myGlobalVariable = globalVariable

我建议使用以下方法：

在main.js中：

import {createApp} from 'vue'

let app=createApp({
  provide:{
    globalVariable:123
  }

}).$mount('#app')

在某些子组件或孙子组件中，请执行以下操作：

export default{
 name:'some-compo',
 inject:['globalVariable'],
 //then access this.globalVariable as property in you component
...
}

---

最直接的替代品是

app.config.globalProperties

。见：

因此：

Vue.prototype.$myGlobalVariable=globalVariable

变成：

const-app=Vue.createApp（{}）
app.config.globalProperties.$myGlobalVariable=globalVariable

请注意，这是针对特定应用程序的，而不是像Vue.prototype那样是全局的。根据设计，所有全局配置选项现在都限定在应用程序的范围内

相关RFC如下所示：

请注意，应用程序级

提供

/

注入

（也在该RFC中讨论）也是使用

Vue的替代方法。原型

：

const-app=Vue.createApp（{}）
应用程序提供（'myGlobalVariable'，globalVariable）
//在子体组件中
导出默认值{
注入：['myGlobalVariable']
}

文件：

这里的想法是组件可以显式声明属性，而不是通过魔法继承它。这避免了名称冲突等问题，因此无需使用

$

前缀。这也有助于让人们更清楚地了解房产的确切来源

---

您更喜欢哪种方法取决于您的具体情况。

对于那些在

setup（）

方法中对如何访问

globalProperty

感到困惑的人，您可以使用

getCurrentInstance（）

，如下文档所示

---

如果可能，您应该使用导入或提供/注入。定义全局变量/函数并使用它们的另一种方法是使用GlobalProperty（尽管这似乎更像是一种反模式）。但是如果您使用的库使用GlobalProperty，那么您可以这样使用它。这也适用于全局函数

const app = Vue.createApp({})
app.config.globalProperties.$http = () => {} // global function
app.config.globalProperties.$globalVariable = 'Jimmy' // global variable

1。使用选项API

mounted() {
  console.log(this.$globalVariable)
}

2。使用设置方法

<script setup>
    import { getCurrentInstance } from 'vue'

    const app = getCurrentInstance()
    const progressBar = app.appContext.config.globalProperties.$globalVariable

    console.log(this.$globalVariable)
</script>

从“vue”导入{getCurrentInstance}
const app=getCurrentInstance（）
const progressBar=app.appContext.config.globalProperties.$globalVariable
console.log（此.$globalVariable）

您可以使用Vuex处理所有全局数据是的，当然，我可以使用存储或全局混合，但我要求使用原型