Nuxt mid-level certification launch date announced!

Опции компонента

Узнайте, как мигрировать с опций компонентов Nuxt 2 на композаблы Nuxt 3.

asyncData и fetch

Nuxt 3 предоставляет новые опции для получения данных из API.

Изоморфное получение

В Nuxt 2 вы могли использовать @nuxtjs/axios или @nuxt/http для получения данных - или просто глобальный fetch, заполненный полифиллами.

В Nuxt 3 вы можете использовать глобально доступный метод fetch , имеющий тот же API, что и Fetch API или метод $fetch, использующий unjs/ofetch. Он имеет ряд преимуществ, включая:

  1. Он будет "умно" выполнять прямые вызовы API, если он выполняется на сервере, или выполнять клиентский вызов к вашему API, если он выполняется на клиенте. (Он также может выполнять вызовы API сторонних сервисов.)
  2. Кроме того, он предоставляет удобные функции, включая автоматический разбор ответов и преобразование данных в строку.

Вы можете прочитать больше о прямых вызовах API или получении данных.

Композаблы

Nuxt 3 предоставляет новые композаблы для получения данных: useAsyncData и useFetch. У каждой из них есть "ленивые" варианты (useLazyAsyncData и useLazyFetch), которые не блокируют навигацию на клиенте.

В Nuxt 2 вы получали данные в своем компоненте с помощью синтаксиса, похожего на:

export default {
  async asyncData({ params, $http }) {
    const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
    return { post }
  },
  // или альтернативного
  fetch () {
    this.post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
  }
}

Внутри ваших методов и шаблонов вы могли использовать переменную post так же, как и любые другие данные, предоставляемые вашим компонентом.

С Nuxt 3 вы можете выполнять это получение данных с помощью композабла в вашем методе setup() или теге <script setup>:

<script setup lang="ts">
// Определите параметры где-нибудь с помощью `defineProps()`, `useRoute()` и т.д.
const { data: post, refresh } = await useAsyncData('post', () => $fetch(`https://api.nuxtjs.dev/posts/${params.id}`) )
// Или вместо этого - useFetch - это удобная обертка вокруг useAsyncData, когда вы выполняете простой запрос
const { data: post, refresh } = await useFetch(`https://api.nuxtjs.dev/posts/${params.id}`)
</script>

Теперь в Nuxt 3 вы можете использовать post внутри вашего шаблона или вызвать refresh для обновления данных.

Несмотря на название, useFetch не является прямой заменой хука fetch(). Более того, useAsyncData заменяет оба хука и более настраиваемый. Он может делать больше, чем просто получение данных с эндпоинта. useFetch является удобной оберткой над useAsyncData для простого получения данных с эндпоинта.

Миграция

  1. Замените хукasyncData на useAsyncData или useFetch в вашей странице/компоненте.
  2. Замените хук fetch на useAsyncData или useFetch в вашем компоненте.
Узнать больше Docs > Migration > Meta.

key

Теперь вы можете определить ключ внутри макроса компилятора definePageMeta.

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

Узнать больше Docs > Migration > Pages And Layouts.

loading

Эта функция пока не поддерживается в Nuxt 3.

middleware

Узнать больше Docs > Migration > Plugins And 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

Узнать больше Docs > Getting Started > Transitions.

validate

Хук validate в Nuxt 3 принимает только один аргумент - 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. Вместо этого вы можете непосредственно использовать watch для повторного получения данных.

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