为什么Uselazyfetch综合返回null数据？

Question

我正在尝试学习如何在NUXT3中使用数据获取组合。 由于某种原因，我得到了一个“加载”文本，以代替用户名应为：

我的预期输出应该是：

stackblitz演示：

这是我的可综合代码： 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,
  };
}

以及我想使用的组件在这里： pcardcard.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>

有人知道为什么用户名不加载吗？如果i console.log（pendinguser.value，user.value）我获得 true null

Answer 1

更新

不确定是否是实际的当前问题，但将 nuxt 降级到 3.0.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>

您应该有一些工作。

如手表（不确定）（不确定）（不确定） “ nofollow noreferrer”>文档因为 uselazyfetch 是异步和非块。