Vue3 基于父级传递的异步 prop 获取数据的最佳方式

Question

在 Vue 3 中，我的组件“App”发出异步 API 请求来检索有关“购买”的信息。此“购买”被传递到其子组件“DeliveryInfo”。

在“DeliveryInfo”中，我需要根据“purchase”属性中包含的“customerId”属性发出另一个请求。然而，当“DeliveryInfo”收到“purchase”属性时，它的值首先是未定义的。第二个 API 请求将会失败。

为了避免这种情况，我使用了一个观察者，这样当“DeliveryInfo”最终获得“purchase”道具的内容时，它就会调用 API 并更新自己的数据。

我听说这对性能不好。有人可以帮助我改进我的代码吗？

这是我的 App.vue 组件：

<template>

    <Purchase :purchase="purchase" />

</template>

<script>
import Purchase from "./components/Purchase"

export default {
  name: "App",
  components: { Purchase },
  data() {
    return {
      purchase: []
    };
  },
  methods: {
    async fetchPurchase(id) {
      const response = await fetch(`myapi.com/purchases/${id}`);
      const data = await response.json();
      return data;
    }
  },
  async created() {
    // example with a specific id
    this.purchase = await this.fetchPurchase(79886);
  }
}

</script>

还有我的 DeliveryInfo 组件：

<template>
    <div class="delivery-info embossed">
        <div>
            <h4>Adress</h4>
            <p>{{ purchase.deliveryAdress }}</p>
            <p>{{ purchase.deliveryCity }}</p>
        </div>
        <div>
            <h4>Customer info</h4>
            <p>{{ customerData.firstname }} {{customerData.lastname}}</p>
            <p>{{ customerData.phone }}</p>
        </div>

    </div>
</template>

<script>

export default {
    name: "DeliveryInfo",
    props: ["purchase"],
    data(){
        return{
            customerData: {}
        }
    },
    methods:{
        async fetchCustomer(){
            if(!this.purchase){
                return
            }
            const response = await fetch(`myapi/customers/${this.purchase.customerId}`)
            this.customerData = await response.json()
        }
    },
    watch : {
        purchase(){
            this.fetchCustomer()
        }
    }

}

</script>

Answer 1

我通常使用 watcher API 来监视异步 props 的变化。当 prop 发生变化时，执行特定操作。当然，如果该属性是默认值，例如未定义，则不执行任何操作。