Nuxt3 useAsyncData не работает на подключенном жизненном цикле

Question

Я все еще немного не понимаю, что я здесь делаю не так. По сути, у меня есть компонент vue, в который я хочу загрузить некоторые данные в асинхронном режиме после монтирования элемента.

Я использую NUXT 3 и API композиции.

      <script setup>

let directories = useState('directories', () => null);

onMounted( async () => {
const { data: response } = await useAsyncData('directories', () => $fetch('/api/s3-get-directories'));
directories.value = response;
});

</script>

Похоже, что триггеры onMounted срабатывают перед рендерингом и неправильно получают данные. Если я перехожу к установленному в setTimeout и даю задержку 100 мс, он работает нормально.

Я был бы признателен за пример того, как я должен загружать данные без блокировки после того, как клиент будет готов. Или любое объяснение того, что я здесь делаю не так.

Answer 1

мне не хватало { server: false }в опциях

      await useLazyAsyncData('directories', () => $fetch('/api/s3-get-directories'), { server: false });

Это заставляет его работать только во внешнем интерфейсе, а не в бэкэнде.