通过 100+ 技巧合集学习 Nuxt!

组件选项

了解如何将 Nuxt 2 组件选项迁移到 Nuxt 3 composables。

asyncDatafetch

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 用于获取数据:useAsyncDatauseFetch。它们各自都有“lazy”变体(useLazyAsyncDatauseLazyFetch),这些变体不会阻止客户端导航。

在 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 来更新数据。

尽管名称如此,useFetch 并非 fetch() hook 的直接替代品。相反,useAsyncData 替代了这两个 hooks 并且更可定制;它可以做的不只是从端点获取数据。useFetchuseAsyncData 的一个便捷包装器,用于简单地从端点获取数据。

迁移

  1. asyncData hook 替换为页面/组件中的 useAsyncDatauseFetch
  2. fetch hook 替换为组件中的 useAsyncDatauseFetch
文档 > 迁移 > Meta 中阅读更多信息。

key

您现在可以在 definePageMeta 编译器宏中定义 key。

pages/index.vue
- <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 编译器宏中指定它。

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

transition

文档 > 入门 > 过渡 中阅读更多信息。

validate

Nuxt 3 中的 validate hook 仅接受一个参数,即 route。与 Nuxt 2 中一样,您可以返回一个布尔值。如果您返回 false 并且找不到另一个匹配项,则表示 404 错误。您也可以直接返回一个带有 statusCode/statusMessage 的对象,以立即响应错误(不会检查其他匹配项)。

pages/users/[id].vue
- <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 来触发重新获取数据。

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