Это так не работает. Передача состояние с сервера на клиент не происходит сама по себе, его нужно прокидывать, для этого в 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