Nuxt 中计算属性中使用 useAsyncData 的正确姿势？

2024-03-18 15:52:14

在 Nuxt 中计算属性中使用 useAsyncData 的正确方法

摘要

在 Nuxt 中的计算属性中使用 useAsyncData 是一种常见场景，但这需要谨慎处理。直接将 useAsyncData 放在计算属性中可能导致无限循环和错误。通过将其移动到一个单独的函数或 composable 中，我们可以避免这些问题并确保计算属性的正确行为。

问题

将 useAsyncData 直接放在计算属性中可能导致以下问题：

突变依赖项： useAsyncData 返回一个包含数据的响应式对象。如果在计算属性的 getter 中直接使用，它将导致无限循环。
[Vue 警告] 计算在获取器评估后仍处于脏状态： 这表明计算属性在每次运行 getter 时都在改变其依赖项。这在将 useAsyncData 直接放在计算属性中时很常见。

解决方法

解决这些问题的正确方法是将 useAsyncData 移动到一个单独的函数或 composable 中。这将避免突变依赖项并允许我们在计算属性中使用该函数来获取数据。

步骤：

创建函数或 composable：
创建一个单独的函数或 composable 来获取数据。例如：

const useUserStatus = () => {
  const { error } = useAsyncData<ServerResponseData, ServerResponseError>(
    'user-check-auth-token', () => $fetch(`${appConfig.api.baseUrl}/user/check-auth-token`, {
      method: 'post',
      headers: {
        Authorization: `Bearer ${authToken.value}`
      }
    })
  );

  return !error.value;
};

在计算属性中使用函数或 composable：
在计算属性中使用 useUserStatus 函数或 composable 来获取数据。例如：
```
const isAuthenticated: ComputedRef<boolean> = computed(() => {
  return useUserStatus();
});
```