元件選項

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 呼叫或獲取資料的資訊。

Composables

Nuxt 3 提供了新的 composables 用於獲取資料：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}`)
  }
}

在您的方法和模板中，您可以像使用元件提供的任何其他資料一樣使用 post 變數。

使用 Nuxt 3，您可以使用 composables 在您的 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 hook 僅接受單個參數，即 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>