как заставить дочерний компонент nuxt ждать до завершения вызова asyncData

Question

Для формы у нас есть 2 компонента parent (для вызова asyncdata и передачи данных как реквизиты child) и child (форма). Я могу правильно получить реквизит у ребенка, если я перехожу по ссылке. Но если я попытаюсь обновить sh страницу дочернего компонента, она выдаст ошибку, так как пропуски не передаются. Обнаружена причина, по которой родительские асинхронные данные не завершаются до того, как дочерний процесс отдает данные в реквизит.

Родительский компонент

<template>
  <div>
    <p>EDIT</p>
    <NewListingModal :is-edit="true" :form-props="this.form" />
  </div>
</template>
<script>
  import NewListingModal from '@/components/NewListingModal.vue'

  export default {
    components: { NewListingModal },
    async asyncData({ params, store }) {
      const listing = await store.$db().model('listings').find(params.listing)  //vuexorm call
      if (typeof listing !== 'undefined') {
        const convertedListing = JSON.parse(JSON.stringify(listing))
        return {
          name: '',
          scrollable: true,
          form: {names: convertedListing.names}
        }
      }
    },
  }
</script>

child компонент (другие данные формы удалены, чтобы сделать его понятным)

<template>
  <div v-for="name in this.form.names" :key="name">
    <p>{{ name }} <a @click.prevent="deleteName(name)">Delete<a /></a></p>
  </div>
</template>



<script>
  import Listing from '@/models/listing'


  export default {
    name: 'ListingModal',
    props: {isEdit: {type: Boolean, default: false}, formProps: {type: Object}},
    data() {
      return {
        name: '',
        scrollable: true,
        form: {names: this.formProps.names}
      }
    },
    methods: {
      addName() {
        this.form.names.push(this.name)
        this.name = ''
      },
      deleteName(name) {
        const names = this.form.names
        names.splice(names.indexOf(name), 1)
      }
    }

  }
</script>

Как заставить рендеринг компонента NewListingModal ждать, пока asyncData завершится в родительском?

Answer 1

В моем случае я использовал asyncData в родительском компоненте nuxt, который выбирает данные с помощью действия store dispatch, а затем устанавливает его на какой-то ключ состояния хранилища с помощью мутации.

Затем я использовал validate метод в моем дочернем компоненте. Поскольку Nuxt validate может возвращать обещания, я сначала проверил хранилище vuex на предмет извлеченных данных. Если его нет, я перезагружаю его и возвращаю обещание.

В родительском компоненте. vue

export default {
  async asyncData({ params, store }) {
       // Api operation which may take sometime
       const {data} = await store.dispatch('fetch-my-data')
       store.commit('setData', data) //This should be within above dispatch, but here for relevance 
  }
}

Здесь я только выбираю и сохраняю в хранилище vuex.

Дочерний компонент. vue

export default {
   async validate({ params, store }) {
      let somedata = store.state.data //This is what you've set via parent's component mutation
      return !!somedata || store.dispatch('fetch-my-data')
   }
}

Здесь я возвращаю либо данные хранилища vuex (если они есть), либо перезапускаю их.