元件選項

asyncData 和 fetch

Nuxt 3 提供了新的選項，用於從 API 獲取資料。

同構 Fetch

在 Nuxt 2 中，您可能會使用 @nuxtjs/axios 或 @nuxt/http 來獲取資料，或者只是使用 polyfill 的全域 fetch。

在 Nuxt 3 中，您可以使用全域可用的 fetch 方法，它具有與Fetch API 相同的 API，或使用 $fetch 方法，該方法使用 unjs/ofetch。它具有許多優點，包括：

1. 如果它在伺服器上執行，它會「智慧地」處理直接 API 呼叫，或者如果它在客戶端上執行，則會向您的 API 發出客戶端呼叫。（它也可以處理呼叫第三方 API。）
2. 此外，它還附帶了便利的功能，包括自動解析回應和字串化資料。

您可以閱讀更多關於直接 API 呼叫或獲取資料的資訊。

組合式函式

Nuxt 3 提供了新的組合式函式來獲取資料：useAsyncData 和 useFetch。它們各自都有「lazy」變體（useLazyAsyncData 和 useLazyFetch），它們不會阻止客戶端導航。

在 Nuxt 2 中，您會在元件中使用類似以下的語法獲取資料：

export default {
  async asyncData({ params, $http }) {
    const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
    return { post }
  },
  // or alternatively
  fetch () {
    this.post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
  }
}

在您的 methods 和模板中，您可以使用 post 變數，類似於使用元件提供的任何其他資料片段。

使用 Nuxt 3，您可以使用 setup() 方法或 <script setup> 標籤中的組合式函式執行此資料獲取：

<script setup lang="ts">
// Define params wherever, through `defineProps()`, `useRoute()`, etc.
const { data: post, refresh } = await useAsyncData('post', () => $fetch(`https://api.nuxtjs.dev/posts/${params.id}`) )
// Or instead - useFetch is a convenience wrapper around useAsyncData when you're just performing a simple fetch
const { data: post, refresh } = await useFetch(`https://api.nuxtjs.dev/posts/${params.id}`)
</script>

您現在可以在 Nuxt 3 模板中使用 post，或者呼叫 refresh 來更新資料。

遷移

1. 在您的頁面/元件中，將 asyncData hook 替換為 useAsyncData 或 useFetch。
2. 在您的元件中，將 fetch hook 替換為 useAsyncData 或 useFetch。

head

key

您現在可以在 definePageMeta 編譯器巨集中定義 key。

- <script>
- export default {
-   key: 'index'
-   // or a method
-   // key: route => route.fullPath
- }
+ <script setup>
+ definePageMeta({
+   key: 'index'
+   // or a method
+   // key: route => route.fullPath
+ })
</script>

layout

loading

Nuxt 3 目前尚不支援此功能。

middleware

scrollToTop

此功能在 Nuxt 3 中尚不支援。如果您想覆寫 vue-router 的預設捲動行為，可以在 ~/app/router.options.ts 中進行設定（詳情請參閱文件）。與 key 類似，請在 definePageMeta 編譯器巨集中指定它。

- <script>
- export default {
-   scrollToTop: false
- }
+ <script setup>
+ definePageMeta({
+   scrollToTop: false
+ })
</script>

transition (轉場)

validate (驗證)

Nuxt 3 中的 validate 鉤子僅接受一個參數，即 route。與 Nuxt 2 中一樣，您可以返回一個布林值。如果您返回 false 且找不到其他匹配項，這將表示 404 錯誤。您也可以直接返回一個帶有 statusCode / statusMessage 的物件，以立即回應錯誤（其他匹配項將不會被檢查）。

- <script>
- export default {
-   async validate({ params }) {
-     return /^\d+$/.test(params.id)
-   }
- }
+ <script setup>
+ definePageMeta({
+   validate: async (route) => {
+     const nuxtApp = useNuxtApp()
+     return /^\d+$/.test(route.params.id)
+   }
+ })
  </script>

watchQuery (監看查詢)

Nuxt 3 不支援此功能。您可以直接使用 watcher 來觸發重新獲取資料。

<script setup lang="ts">
const route = useRoute()
const { data, refresh } = await useFetch('/api/user')
watch(() => route.query, () => refresh())
</script>