Nuxt useFetch 数据访问：为何不能直接访问属性？

2024-07-11 17:18:27

Nuxt useFetch 深入解析：为何数据访问需要 v-for？

在 Nuxt.js 应用开发中，useFetch 无疑是简化数据获取流程的利器。然而，最近在项目实践中，我却遇到了一个令人困惑的现象：通过 useFetch 获取的 API 数据，竟然只能在 v-for 指令渲染的模板中才能正常访问，这究竟是为什么呢？

问题重现：当数据获取遭遇障碍

为了更直观地说明问题，我们以一个具体的场景为例。假设我们需要从后端 API 获取用户信息，并在页面上展示用户名。代码如下：

<script setup>
definePageMeta({
  layout: "dashboard",
});
const token = useCookie("token");
const { data: user } = await useFetch("http://127.0.0.1:8000/auth/", {
  onRequest({ options }) {
    options.headers = options.headers || {};
    options.headers.authorization = `Bearer ${token.value}`;
  },
});
console.log(user);
</script>

<template>
  <div class="flex flex-col items-center">
    <div class="absolute top-1/4 flex flex-col items-center">
      <p class="special-font text-7xl rounded-sm px-7 gradient-red">
        {{ user.username }}
      </p>
    </div>
  </div>
</template>

这段代码看似平淡无奇，我们使用 useFetch 发起 API 请求，并将返回的数据存储在 user 变量中。浏览器控制台的输出也证实了数据获取成功：

{
    "__v_isShallow": false,
    "dep": {},
    "__v_isRef": true,
    "_rawValue": {
        "User": {
            "username": "pepee",
            "id": 1,
            "permissions": [],
            "is_admin": true,
            "is_active": true
        }
    },
    "_value": {
        "User": {
            "username": "pepee",
            "id": 1,
            "permissions": [],
            "is_admin": true,
            "is_active": true
        }
    }
}

然而，页面上却无法直接显示 user.username 的值。更令人费解的是，如果我们尝试使用 v-for 指令遍历这个并非数组的 user 对象，页面竟然神奇地显示了用户名：

<template>
  <div class="flex flex-col items-center">
    <div class="absolute top-1/4 flex flex-col items-center">
      <p
        class="special-font text-7xl rounded-sm px-7 gradient-red"
        v-for="user in user"
      >
        {{ user.username }}!
      </p>
    </div>
  </div>
</template>

这种现象明显不符合逻辑，也给代码带来了不必要的复杂性。那么，问题究竟出在哪里呢？

揭秘真相：响应式对象与数据访问

经过一番调查研究，我终于找到了问题的根源：useFetch 返回的并非普通的 JavaScript 对象，而是一个响应式对象。 这意味着我们不能像访问普通对象属性那样直接访问其中的数据，而需要借助计算属性或 watch 监听器。

为了更好地理解这一点，我们可以将 useFetch 返回的响应式对象想象成一个包裹着数据的盒子。这个盒子会时刻监听数据的变化，并在数据发生改变时通知页面进行更新。而我们如果想要访问盒子里的数据，就需要使用特定的方法打开它。

解决方案：两种途径轻松获取数据

明白了问题的原因，解决起来就容易多了。我们可以使用以下两种方法来访问 useFetch 返回的数据：

方法一：借助计算属性的力量

<script setup>
// ... other code ...

const username = computed(() => user.value?.User?.username);
</script>

<template>
  <div class="flex flex-col items-center">
    <div class="absolute top-1/4 flex flex-col items-center">
      <p class="special-font text-7xl rounded-sm px-7 gradient-red">
        {{ username }}
      </p>
    </div>
  </div>
</template>

这里我们创建了一个名为 username 的计算属性，它负责从 user 对象中提取 username 的值。由于计算属性会自动追踪依赖关系，因此当 user 对象发生变化时，username 也会随之更新，确保页面始终显示最新的数据。

方法二：利用 watch 监听器实时追踪

<script setup>
// ... other code ...

const username = ref(null);

watch(
  () => user.value,
  (newUser) => {
    username.value = newUser?.User?.username;
  },
  { immediate: true }
);
</script>

<template>
  <!-- ... your template code ... -->
</template>

在这个方法中，我们创建了一个名为 username 的响应式变量，并使用 watch 监听器监听 user 对象的变化。当 user 更新时，监听器会将 username 设置为最新的用户名。

总结：告别 v-for，拥抱优雅代码

通过以上两种方法，我们成功绕过了 v-for 陷阱，实现了对 useFetch 返回数据的优雅访问。这不仅使代码更加清晰易懂，也避免了不必要的循环操作，提升了应用性能。

常见问题解答

为什么 useFetch 要返回响应式对象？
- 响应式对象是 Vue.js 框架实现数据绑定和页面更新的核心机制。useFetch 返回响应式对象，可以方便地将获取到的数据与页面元素进行绑定，实现数据的自动更新。
除了计算属性和 watch 监听器，还有其他方法访问响应式对象的数据吗？
- 可以直接在模板中使用 user.value.User.username 的方式访问数据。
为什么我的代码中 user.value 是 undefined？
- 这可能是因为数据还没有加载完成。你可以在模板中使用 v-if="user.value" 来判断数据是否已经加载。
使用 v-for 遍历 user 对象为什么可以正常显示数据？
- 这是因为 v-for 指令会自动解包响应式对象，获取其中的数据进行遍历。
除了获取用户信息，useFetch 还可以用于哪些场景？
- useFetch 可以用于任何需要从服务器获取数据的场景，例如获取文章列表、商品信息、用户评论等。