Question

我有一个名为EditPost的组件，它使用了另一个称为PostForm的组件。我正在使用vuex store进行api调用，以从EditPost beforeCreate方法中的后端检索要编辑的post对象，并使用计算属性从存储中获取检索到的post，然后将其作为道具传递给PostForm组件。由于对象已经存在，因此我希望将其数据填充到PostForm的输入字段中。但是对象的值不存在，因为该组件之前已经渲染过。如何确保在呈现组件之前可以安全地访问数据。

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

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

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

</script>

Answer 1

您可以等待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>

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

1 个答案: