Nuxt.js Data Fetching

ภาพรวม

Nuxt มี composables สำหรับการดึงข้อมูลที่ทำงานได้ทั้งฝั่ง Server และ Client:

• useFetch - สำหรับเรียก API โดยตรง
• useAsyncData - สำหรับการดึงข้อมูลแบบกำหนดเอง
• $fetch - ใช้สำหรับเรียก API จากฝั่ง Client

useFetch

ใช้สำหรับเรียก API โดยอัตโนมัติจัดการการโหลดข้อมูลทั้งฝั่ง Server และ Client

<template>
  <div>
    <p>จำนวนผู้เข้าชม: {{ count }}</p>
  </div>
</template>

<script setup>
const { data: count } = await useFetch("/api/count");
</script>

useAsyncData

ใช้สำหรับการดึงข้อมูลแบบกำหนดเองที่ซับซ้อนขึ้น

<script setup>
const { data: products, error } = await useAsyncData(
  "products", // key สำหรับ caching
  () => $fetch("/api/products"),
);
</script>

การใช้งาน $fetch

ใช้สำหรับเรียก API จากฝั่ง Client โดยตรง

<script setup>
async function submitForm() {
  try {
    const response = await $fetch("/api/submit", {
      method: "POST",
      body: { name: "John" },
    });
    console.log("ส่งข้อมูลสำเร็จ", response);
  } catch (error) {
    console.error("เกิดข้อผิดพลาด", error);
  }
}
</script>

การจัดการ Cache

Nuxt จัดการ cache ให้อัตโนมัติโดยใช้ key

<script setup>
// ใช้ key เดียวกันจะได้ข้อมูลจาก cache
const { data: user1 } = useFetch("/api/user/1");
const { data: user2 } = useFetch("/api/user/1"); // ใช้ cache จาก user1
</script>

การรีเฟรชข้อมูล

สามารถรีเฟรชข้อมูลได้ด้วยฟังก์ชัน refresh()

<template>
  <div>
    <p>ข้อมูล: {{ data }}</p>
    <button @click="refreshData">รีเฟรชข้อมูล</button>
  </div>
</template>

<script setup>
const { data, refresh: refreshData } = useFetch("/api/data");
</script>

ตัวเลือกสำคัญ

lazy

โหลดข้อมูลหลังจากโหลดหน้าเว็บเสร็จ

<script setup>
const { pending, data } = useFetch("/api/data", {
  lazy: true,
});
</script>

server

กำหนดให้เรียกข้อมูลเฉพาะฝั่ง Server

<script setup>
const { data } = useFetch("/api/secret", {
  server: false, // เรียกเฉพาะฝั่ง Client
});
</script>

immediate

ควบคุมการโหลดข้อมูลอัตโนมัติ

<script setup>
const { execute } = useFetch("/api/data", {
  immediate: false, // ไม่โหลดข้อมูลอัตโนมัติ
});

// โหลดข้อมูลเมื่อต้องการ
function loadData() {
  execute();
}
</script>

ตัวอย่างการใช้งานร่วมกัน

<template>
  <div>
    <div v-if="pending">กำลังโหลด...</div>
    <div v-else>
      <ul>
        <li v-for="item in items" :key="item.id">
          {{ item.name }}
        </li>
      </ul>
      <button @click="refresh">รีเฟรช</button>
    </div>
  </div>
</template>

<script setup>
const {
  data: items,
  pending,
  refresh,
  error,
} = useFetch("/api/items", {
  lazy: true,
  server: false,
});

// เรียกใช้ฟังก์ชัน refresh เมื่อต้องการรีเฟรชข้อมูล
</script>

สรุป

• ใช้ useFetch สำหรับเรียก API ทั่วไป
• ใช้ useAsyncData สำหรับการดึงข้อมูลที่ซับซ้อน
• ใช้ $fetch สำหรับเรียก API จากฝั่ง Client
• ใช้ lazy และ server options เพื่อควบคุมการโหลดข้อมูล
• ใช้ refresh() เพื่อรีเฟรชข้อมูลเมื่อต้องการ

TIP

• ควรใช้ useFetch หรือ useAsyncData ใน setup() หรือ <script setup>
• ใช้ pending เพื่อแสดงสถานะการโหลด
• ใช้ error เพื่อจัดการข้อผิดพลาด