我试图在调用 mounted() 钩子之前从 firebase 获取数据，但 firebase 查询是异步函数，我很难处理这些数据。 这是我的代码片段：

<template>
  <b-table-simple sticky-header="90%" class="table-bordered">
    <b-thead head-variant="dark">
      <b-tr>
        <b-th >氏名</b-th>
        <b-th v-for="date in printables" :key="date" class="text-center" v-html="date"></b-th>
      </b-tr>
    </b-thead>
    <b-tbody v-if="fetched">
      <template v-for="(staff_data, staff_id) in project.assigned_staff">
        <b-tr :key="staff_id">
          <b-th rowspan="6">
            <b-tr>
              <b-th rowspan="6" v-html="staff_data.name.split(/ |　/).join('<br>')"></b-th>
              <b-th >[]</b-th>
            </b-tr>
            <b-tr>
              <b-th >出勤</b-th>
            </b-tr>
            <b-tr>
              <b-th >残業</b-th>
            </b-tr>
            <b-tr>
              <b-th >深夜</b-th>
            </b-tr>
            <b-tr>
              <b-th >内容</b-th>
            </b-tr>
            <b-tr>
              <b-th >弁当</b-th>
            </b-tr>
          </b-th>
          <b-td v-for="i in days.length" :key="i">
            <b-form-checkbox @change.native="setBGColor($event)" :ref="`select-${i}`"></b-form-checkbox>
          </b-td>
        </b-tr>
        <b-tr :key="staff_id">
          <b-td v-for="day in days" :key="day">
            <b-form-select @change.native="setBGColor($event)" :ref="`regular-${staff_id}-${day}`" :options="regularTimeOption"></b-form-select>
          </b-td>
        </b-tr>
        <b-tr :key="staff_id">
          <b-td v-for="day in days" :key="day">
            <b-form-select @change.native="setBGColor($event)" :ref="`overtime-${staff_id}-${day}`" :options="overTimeAndLateNightOption"></b-form-select>
          </b-td>
        </b-tr>
        <b-tr :key="staff_id">
          <b-td v-for="day in days" :key="day">
            <b-form-select @change.native="setBGColor($event)" :ref="`latenight-${staff_id}-${day}`" :options="overTimeAndLateNightOption"></b-form-select>
          </b-td>
        </b-tr>
        <b-tr :key="staff_id">
          <b-td v-for="day in days" :key="day">
            <b-form-select @change.native="setBGColor($event)" :ref="`type-${staff_id}-${day}`" :options="typeOption"></b-form-select>
          </b-td>
        </b-tr>
        <b-tr :key="staff_id">
          <b-td v-for="day in days" :key="day">
            <b-form-select @change.native="setBGColor($event)" :ref="`bento-${staff_id}-${day}`" :options="bentoOption"></b-form-select>
          </b-td>
        </b-tr>
      </template>
    </b-tbody>
  </b-table-simple>
<template>

//... 

const project

export default {
 beforeCreate() {
  // fetching "project" which is necessary to determine table structure (laying out <b-tr>, <b-th> and <b-td>)
  // this should be done before "mounted()" hook
  firebase.database().ref(`/project/${projectId}`)
                     .once('value')
                     .then(...)
  // fetching "daily_report" which is data to fill each <b-td>
  // this should be executed after "project" is fetched
  firebase.database().ref(`/daily_report/${projectId}`)
                     .once('value')
                     .then(snapShot => {
                       project = snapShot.val()                 
                       ...
                     })
 },
 mounted() {
   const elRegular = this.$refs[`regular-${postfix}`]
   elRegular.value = report.hours_regular
 },
 //...
}

我想要的顺序是：

• beforeCreate() 已启动
• 已启动获取项目
• 已完成获取项目
• 已启动获取 daily_report
• 已完成获取 daily_report
• beforeCreate() 已完成
• 所有 、 和 均在 created() 和 mounted() 之间呈现
• 已启动 mounted()
• 所有 均已填充来自 daily_report 的数据
• mounted() 已完成

但由于 firebase.database().on() 和 once() 是异步函数，因此实际顺序将是：

• beforeCreate() 已启动
• 已获取项目已启动
• 已启动获取 daily_report
• beforeCreate() 已完成
• 已启动 mounted()
• mounted() 已完成
• 已完成获取项目
• 已完成获取 daily_report

我认为这里最大的问题是在 mounted() 启动后获取项目已完成。 我搜索了 vue router 的 async/await 和 beforeRouteEnter guard，但它们似乎都不能解决我的问题。 如何在 mounted hook 启动之前完成基于 promise 的函数？