javascript - 在 Vue.js 3 setup() 中访问 this.$root

Question

在 Vue 2 中，您可以访问 this.$root里面created钩。在 Vue 3 中，created 中的所有内容钩子(Hook)现在进入 setup() .
在 setup()我们无权访问 this ，那么，我们如何访问根实例上的任何内容？
说，我在根实例上设置了一个属性:

const app = createApp(App).mount('#app');

app.$appName = 'Vue3';

我可以访问 this来自 mounted()与 this.$root.$appName ，如何在 setup() 中执行此操作?

更新
我可以访问它，如果我 import它:

import app from '@/main';
...
setup() {
    console.log(app.$appName) // Vue3

但是，如果我必须对每个文件都这样做，这很麻烦。

更新 2
另一种解决方法是使用 provide()里面 App.vue然后 inject()在任何其他组件中:

setup() {
    provide('$appName', 'Vue3')

setup() {
    inject('$appName') // Vue3

Answer 1

您可以定义 global property在 Vue 3 中:

app.config.globalProperties.appName= 'vue3'

与 setup (composition api) 你可以使用 getcurrentinstance要访问该属性:

import { getCurrentInstance } from 'vue'
...
setup() {
    const app= getCurrentInstance()
    console.log(app.appContext.config.globalProperties.appName) 

由于您仍然可以使用 options api，您可以简单地执行以下操作:

mounted(){
   console.log(this.appName) 
}