Vue 3在Promise之后用数据实例化根组件

Question

我需要用Promise返回的数据(项对象(初始化Vue 3应用程序，并从所有组件访问它。应先将提取的项目传递给应用程序，然后再进行其他操作。

import { createApp } from 'vue';
import store from "../store";
import DetailPage from '../views/DetailPage.vue'
my_promise().then(fetched_item => {
const app =  createApp(DetailPage)
app.item = fetched_item // this doesn't works
const vm = app.use(store).mount('#app')
})

详细信息页面.vue

<template>
<navbar-component></navbar-component>
</template>
<script>
import NavBar from '@/components/detailpage/NavBar.vue'
export default {
name: 'DetailPage',
data(){
return {
item: {text: 'default'}
}
},
components: {
'navbar-component': NavBar
}
}
</script>

但是如果我尝试从另一个嵌套组件访问CCD_ 1

mounted(){
console.log("root", this.$root.item)
}

我得到

Proxy {text: "default"}  

而不是在初始化时传递的提取项目

Answer 1

createApp()返回应用程序实例，但您需要根组件(即app.mount()的结果(，它允许访问组件的数据属性：

const app = createApp(DetailPage)
const vm = app.use(store).mount('#app')
vm.item = fetched_item