DAY15: Nuxt.js中的數據獲取

為什麼要使用特定的組合？

當使用像 Nuxt 這樣可以在客戶端和服務器端執行調用並渲染頁面的框架時，需要應對一些挑戰。這就是為什麼 Nuxt 提供了組合來包裹您的查詢。

避免網絡調用的重複

useFetch 和 useAsyncData 組合確保了一旦在服務器上進行了 API 調用，數據將以正確的方式轉發到客戶端。這個 JavaScript 對象可以通過 useNuxtApp().payload 訪問，並且在客戶端執行代碼時用於避免重新獲取相同的數據。

使用特定組合的原因

• useFetch 是在組件設置函數中處理數據獲取的最簡單方法。
• 當希望基於用戶交互進行網絡請求時，$fetch 幾乎總是正確的處理程序。
• 如果需要更精細的控制，可以獨立使用 useAsyncData 和 $fetch。

使用 Nuxt DevTools 進行數據檢查

使用 Nuxt DevTools 可以輕鬆檢查 payload 中的數據。該工具在 payload 選項卡中提供了此數據的詳細信息。

利用Suspense

Nuxt 使用 Vue 的 Suspense 組件，在所有異步數據可用於視圖之前，防止導航。數據獲取組合可以幫助您充分利用這個功能，並根據每個調用的情況使用最合適的功能。

最佳實踐

使用 useFetch 組合是處理數據獲取的最簡單方法，特別是在組件設置函數中。以下是一個簡單的範例：

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

<template>
  Page visits: {{ count }}
</template>

使用 $fetch 當需要發送數據到事件處理程序時，或進行僅在客戶端的邏輯時。以下是一個範例：

<script setup lang="ts">
const { data, error, execute, refresh } = await useFetch('/api/users')
</script>

<template>
  <div>
    <p>{{ data }}</p>
    <button @click="refresh">Refresh data</button>
  </div>
</template>

使用 useAsyncData 當需要包裝調用，但仍希望獲得組合提供的好處，例如導航阻止、緩存或執行。以下是一個範例：

<script setup lang="ts">
const { data, error } = await useAsyncData('users', () => myGetFunction('users'))
</script>