为什么 useLazyFetch 可组合项返回空数据？

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

，如文档中所述，因为

useLazyFetch

是异步且非阻塞的。