为什么 useLazyFetch 可组合 returns 空数据？

Question

我正在尝试学习如何使用 Nuxt3 中的数据获取可组合项。 出于某种原因，我得到了一个“正在加载”文本来代替用户名应该是的地方：

我的预期输出应该是这样的：

Stackblitz 演示：https://stackblitz.com/edit/nuxt-starter-grcyfr?file=components/PostCard.vue

这是我的可组合代码： useUser:

export default function (id) {
  const baseURL = 'https://jsonplaceholder.typicode.com';
  const { pending: pendingUsers, data: users } = useLazyFetch(
    `${baseURL}/users`
  );
  const { pending: pendingUser, data: user } = useLazyFetch(
    `${baseURL}/users/${id}`
  );

  return {
    pendingUsers,
    users,
    pendingUser,
    user,
  };
}

我要使用它的组件在这里： PostCard.vue:

<template>
  <article class="rounded border overflow-hidden">
    ...snip...
      <footer class="mt-6 flex items-center">
        <PostAvatar :post="post" />
        <div class="ml-3">
          <p class="text-sm font-medium text-gray-900">
            <a href="#" class="hover:underline">
              {{ pendingUser ? 'Loading...' : user.name }} /////<---- HERE!
            </a>
          </p>
          <div class="flex space-x-1 text-sm text-gray-500">
            <!-- <time :datetime="post.datetime">
              {{ post.date }}
            </time> -->
            mar 4, 2019
            <span aria-hidden="true">&middot;</span>
            <span>misc</span>
          </div>
        </div>
      </footer>
    ...snip...
  </article>
</template>

<script setup>
const props = defineProps({
  post: {
    type: Object,
    default: () => ({}),
  },
});
const { pendingUser, user } = useUser(props.post.userId);
</script>

有人知道为什么用户名没有加载吗？如果我 console.log(pendingUser.value, user.value) 我得到 true null

Answer 1

更新

不确定这是否是当前的实际问题，但将 nuxt 降级到 3.0.0-rc.1 解决了该问题。

鉴于此可组合项

/composables/useUser.js

export default (id) => {
  const baseURL = 'https://jsonplaceholder.typicode.com';

  const { pending: pendingUser, data: user } = useLazyFetch(
    `${baseURL}/users/${id}`
  );
  return {
    pendingUser,
    user,
  };
}

还有这个观点

/pages/index.vue

<script setup>
const { pendingUser, user } = useUser(2);

watch(user, (newUser) => {
  console.log('newUser', newUser);
  user.value = newUser;
})
</script>

<template>
  <div>
    <div>pending? {{ pendingUser }}</div>
    <pre>{{ pendingUser ? 'loading' : user }}</pre>
  </div>
</template>

你应该有一些工作。

可能需要（不确定）使用 watch，如 the documentation 中所述，因为 useLazyFetch 是异步的并且 non-blocking.

为什么 useLazyFetch 可组合 returns 空数据？

Why does useLazyFetch composable returns null data?

nuxt.js

nuxtjs3

更新