Javascript 在Vue上挂载（）之前从firebase获取数据

我试图在调用mounted（）hook之前从firebase获取数据，但firebase查询是异步函数，我正在努力处理这些函数。 以下是我的代码片段：

氏名
[]
出勤
残業
深夜
内容
弁当

/。。。
const项目
导出默认值{
beforeCreate（）{
//获取确定表格结构所需的“项目”（布局和）
//这应该在“mounted（）”挂钩之前完成
firebase.database（）.ref（`/project/${projectId}`）
.once（'值'）
.然后（…）
//获取“每日报告”，这是填写每个
//这应该在获取“项目”后执行
firebase.database（）.ref（`/daily_report/${projectId}`）
.once（'值'）
。然后（快照=>{
project=snapShot.val（）
...
})
},
安装的（）{
const elRegular=this.$refs[`regular-${postfix}`]
elRegular.value=report.hours\u regular
},
//...
}

我希望的订单是：

• beforeCreate（）已启动
• 正在启动获取项目
• 获取项目已完成
• 已启动获取每日报告
• 已完成获取每日报告
• beforeCreate（）已完成
• 所有的和都在created（）和mounted（）之间呈现
• mounted（）已启动
• 所有表格都填写了来自每日报告的数据
• 已安装（）已完成

但由于firebase.database（）.on（）和once（）是异步函数，实际顺序为：

• beforeCreate（）已启动
• 正在启动获取项目
• 已启动获取每日报告
• beforeCreate（）已完成
• mounted（）已启动
• 已安装（）已完成
• 获取项目已完成
• 已完成获取每日报告

我认为这里最大的问题是在mounted（）启动后获取已完成的项目。 我搜索了vue路由器的async/Wait和beforeRouteEnter guard，但它们似乎都不能解决我的问题。

---

如何在启动挂载钩子之前完成基于承诺的函数？

应该将其添加到组件的

数据部分，而不是使用外部变量。这样，Vue就可以在异步调用Firebase后使用它

导出默认值{
数据（）{
项目：{
//空数组，因此Vue开始时没有行，
//并在填充阵列后添加它们。
指派的工作人员：[]
},
beforeCreate（）{
//获取确定表结构所需的“项目”
//（布局，以及）
//这应该在“mounted（）”挂钩之前完成
firebase.database（）.ref（`/project/${projectId}`）
.once（'值'）
.然后（…）
//获取“每日报告”，这是填写每个
//这应该在获取“项目”后执行
firebase.database（）.ref（`/daily_report/${projectId}`）
.once（'值'）
。然后（快照=>{
//设置组件的属性“project”
//到快照的值
this.$set（this'project'，snapShot.val（））；
...
})
},
安装的（）{
const elRegular=this.$refs[`regular-${postfix}`]
elRegular.value=report.hours\u regular
},
...
}
生命周期挂钩不会互相等待。您可以在它们中启动异步调用，但不能暂停生命周期。使用条件呈现和反应属性在数据可用时更新模板。我知道这就是vue。谢谢！