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

对于表单，我们有两个组件父级（用于调用asyncdata并将数据作为道具传递给子级）和子级（表单）。如果我使用链接导航，我可以在child中正确获取道具。但如果我尝试刷新子组件页面，它会抛出错误，因为没有传递道具。发现原因是在子渲染以props方式发送数据之前，父数据未完成

父组件

编辑

从“@/components/NewListingModal.vue”导入NewListingModal
导出默认值{
组件：{NewListingModal}，
异步数据（{params，store}）{
const listing=wait store.$db（）.model（'listings'）.find（params.listing）//vuexorm调用
if（列表类型！==“未定义”）{
const convertedListing=JSON.parse（JSON.stringify（listing））
返回{
名称：“”，
可滚动：对，
格式：{names:convertedListing.names}
}
}
},
}

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

{{name}}删除

从“@/models/Listing”导入列表
导出默认值{
名称：“ListingModal”，
props:{isEdit:{type:Boolean，默认值：false}，formProps:{type:Object}，
数据（）{
返回{
名称：“”，
可滚动：对，
表单：{names:this.formProps.names}
}
},
方法：{
addName（）{
this.form.names.push（this.name）
this.name=“”
},
删除名称（名称）{
常量名称=this.form.names
名称.拼接（名称.索引of（名称），1）
}
}
}

---

如何使

NewListingModal

组件呈现等待父级中的asyncData完成？

在我的例子中，我在父级nuxt组件中使用了

asyncData

，它通过store

dispatch

操作获取数据，然后通过变异将其设置为某个存储状态键

然后我在我的子组件中使用了

validate

方法。由于Nuxt

validate

可以返回承诺，因此我首先检查了vuex存储区以获取数据。如果没有，我会重新蚀刻它，并返回承诺

在Parent component.vue中

导出默认值{
异步数据（{params，store}）{
//Api操作，可能需要一些时间
const{data}=wait store.dispatch（'fetch-my-data'））
commit（'setData'，data）//这应该在上面的分派范围内，但这里是为了相关性
}
}

在这里，我只提取并保存到vuex商店

子组件.vue

导出默认值{
异步验证（{params，store}）{
让somedata=store.state.data//这是您通过父级组件设置的
return！！somedata | | store.dispatch（'fetch-my-data'））
}
}

在这里，我将返回vuex存储数据（如果存在），否则将重新蚀刻它

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