Почему значение переменной .value в Nuxt 3 отображается иначе в консоли?

Почему в консоли всегда выводится true для isPending.value, хотя в объекте Proxy оно равно false? Как можно исправить эту проблему?
  • 2 марта 2024 г. 6:38
Ответы на вопрос 2
Значение переменной .value в Nuxt 3 отображается иначе в консоли из-за использования Proxy для обертывания объектов reactive. 

Когда вы обращаетесь к значению переменной со свойством .value в консоли, вы видите актуальное значение переменной, так как Proxy автоматически возвращает актуальное значение при прямом обращении к нему.

При этом, в объекте Proxy значение переменной может быть изменено, но при выводе в консоль может не обновиться сразу, поэтому вы видите false в Proxy, а true при выводе в консоль.

Чтобы исправить эту проблему и увидеть актуальное значение переменной в консоли, вы можете использовать функцию .valueOf() при выводе значения. Например:

```javascript
console.log(isPending.value.valueOf());
```

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

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

Если ты хочешь понаблюдать за изменениями isPending - можешь сделать так:
watch(isPending, (value) => console.log('watch isPending', value), { immediate: true });


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