ถ้าข้อมูลเปลี่ยนบ่อยใน useAsyncData — ควรจัดการยังไงดี? ⚡

[Sascha]

ใน Nuxt 3 เราชอบใช้ useAsyncData() ดึงข้อมูลจาก API เพราะมัน cache ให้เราอัตโนมัติ แต่ถ้าข้อมูลเปลี่ยนบ่อย เช่น รายการออเดอร์ใหม่
ยอดขายที่อัปเดตตลอดเวลา สถานะคำสั่งซื้อที่เปลี่ยนทุกไม่กี่วินาที
ถ้าใช้ useAsyncData() ตรง ๆ มันจะไม่โหลดใหม่ทันทีนะ
เพราะมันจำค่าไว้ใน cache เพื่อให้ SSR เร็วขึ้น

ใช้ refresh() โหลดใหม่เมื่ออยากอัปเดต


<script setup>
const { data, refresh, pending } = await useAsyncData('orders', () =>
$fetch('/api/orders')
);
</script>

<template>
<button @click="refresh()">โหลดข้อมูลล่าสุด</button>
<div v-if="pending">กำลังโหลด...</div>
<pre>{{ data }}</pre>
</template>




ใช้ watch() ดูค่าที่เปลี่ยน แล้ว refresh อัตโนมัติ


const status = ref('pending');
const { data, refresh } = await useAsyncData('orders', () =>
$fetch(`/api/orders?status=${status.value}`)
);

watch(status, () => refresh());





ใช้ { server: false } เพื่อให้ fetch ใหม่ฝั่ง client ทุกครั้ง


await useAsyncData('live', () => $fetch('/api/live'), {
server: false,
});




เขียนโดย: Tanarat Sudjai

Источник:

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.