Задать вопрос
@RomyGalaxy

Почему разное значение переменной в NUXT 3?

async function getPosts () {
        let total = ref(null);
        const { data: articles, refresh } = await useFetch(url, {
            method: 'GET',
            server: true,
            query: {
                per_page: perPage.value,
                page: page.value,
            },
            onResponse(context) {
                total.value = Number(context.response.headers.get('X-WP-Total'))
            },
            onResponseError({ request, response, options }) {
                console.log('Ошибка запроса'+ request)
            }
        });
    console.log(total.value);
}

В onResponse задается значение переменной равное значению заголовка X-WP-Total
В результате чего при выводе в console.log SSR отображает верное значение, а на клиенте null
  • Вопрос задан
  • 124 просмотра
Подписаться 1 Простой 2 комментария
Решения вопроса 1
@null_object
Это так не работает. Передача состояние с сервера на клиент не происходит сама по себе, его нужно прокидывать, для этого в Nuxt сделано много утилит (useAsyncData, useLazyAsyncData, useNuxtData, useState и т.д.), которые пляшут вокруг большого сериализуемого стейта, который на клиенте обратно десериализуется. И useFetch использует это под капотом.

То есть ваш код работает так:
1. На сервере вызывается функция getPosts
2. Выполняется запрос, результат сохраняется в стейт накста, в total.value записывается значение
3. На клиенте вызывается функция getPosts
4. Но тут уже запрос не выполняется, только вычитывается значение из стейта, соответственно onResponse не вызывается

Решить это можно несколькими путями: создать отдельный стейт для total, либо к ответу в onResponse дописывать значение заголовка.

<script setup lang="ts">
const { data } = useFetch('https://jsonplaceholder.typicode.com/todos/1', {
  onResponse({ response, options }) {
    // дописываем в data значение заголовка
    response._data.type = response.headers.get('Content-Type');;
  },
});
</script>


Сериализованное состояние, которое идет с сервера на клиент можно дебажить через Nuxt Devtools
67ae28550973e616213331.png
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы