在从另一个组件传入正确的prop数据之前呈现的组件

Posted 2021-03-30

我有一个名为EditPost的组件，它使用另一个名为PostForm的组件。我正在使用vuex存储来进行api调用，以便从EditPost beforeCreate方法的后端检索要编辑的post对象，并使用computed属性从商店获取检索到的帖子，然后我将其作为prop传递给PostForm组件。由于对象已经存在，我希望它的数据填充在PostForm的输入字段中。但是由于组件之前已呈现，因此对象的值不存在。如何在呈现组件之前确保数据安全到达。

我的EditPost组件基本上是这样的：

<template>
    <PostForm v-bind:key="fetchPost" />
</template>

<script>
beforeCreate() {
    this.$store.dispatch('loadPost');
}
computed: 
    fetchPost() {
        return this.$store.getters.getPost;
    }

</script>

答案

您可以等待loadPost中的beforeCreated()操作完成，然后在API响应之前不会创建该组件。但请注意，这不是最佳做法，因为用户在API返回响应之前不会看到任何内容。

例：

<template>
    <PostForm v-bind:key="fetchPost" />
</template>


<script>
async beforeCreate() {
    await this.$store.dispatch('loadPost');
}
computed: 
    fetchPost() {
        return this.$store.getters.getPost;
    }

</script>