Почему .value в nuxt3 выдает не тот результат в консоли?

Question

[adizh]

К примеру:

<script setup lang="ts">
const { data: users, pending: isPending, status } = useApiFetch<Todo[]>('/todos');
console.log('isPending', isPending.value)
</script>

isPending.value = всегда true выходит, хотя на странице отображается все верно. Если сделать просто console.log(isPending) - выходит объект Proxy и там значимую _value = false. С чем это может быть связано? И как это можно исправить?

Answer 1

[Aetae]

Во первых: всё зависит от сигнатуры этого вашего useApiFetch, очень многое в vue 3 можно сломать неудачной деструктуризацией. Но допустим сам хук нормальный.
В таком случае isPending - это ref, а значит он и должен быть прокси, чтоб собственно работала энтая самая реактивность. Чтоб отобразить в консоли чистый объект - есть хэлпер toRaw(только после этого он уже не будет динамическим).

Далее: если вы выводите в консоль isPending.value - то в консоль, очевидно, попадает значение на момент вызова console.log. Магическим образом прямо в консоли оно уже не изменится.

Если ты хочешь понаблюдать за изменениями isPending - можешь сделать так:

watch(isPending, (value) => console.log('watch isPending', value), { immediate: true });

В заключение предположу, что всё у вас работает как должно, а проблемы с пониманием реактивности vue и асинхронности как таковой.