如何使nuxt子组件等待asyncData调用完成

Question

对于表单，我们有2个组件parent（用于调用asyncdata并将数据作为道具传递给child）和child（form）。如果我使用链接导航，则可以正确获取儿童中的道具。但是，如果我尝试刷新子组件页面，由于没有传递任何道具，它将引发错误。发现原因是在孩子渲染通过道具发送数据之前，父母的异步数据未完成。

父组件

<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>

子组件（删除其他表单数据以使其易于理解）

<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

在我的情况下，我在父nuxt组件中使用了asyncData，该组件通过store dispatch操作获取数据，然后通过变异将其设置为某些存储状态键。

然后我在子组件中使用了validate方法。由于Nuxt validate可以返回promise，因此我首先检查了vuex存储以获取数据。如果没有，我将其重新提取并返回诺言。

在Parent component.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商店。

子component.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存储数据（如果存在），否则将其重新获取。