Vue组件替换后旧状态残留：登出跳转Header状态异常

问题根源 #

1. 状态残留：TanStack Query 会缓存用户数据，登出后未主动清除或失效该缓存，导致 Header 仍读取旧数据。
2. 不合理的 setTimeout：登出请求完成后无需延迟跳转，延迟反而可能引发状态不一致问题。
3. queryKey 使用错误：用 ref 包裹 queryKey 无法正确触发查询刷新，且修改 queryKey.value 不是失效缓存的正确方式。

修复方案 #

1. 移除 setTimeout：登出请求成功后直接跳转路由。
2. 使用 QueryClient 管理缓存：通过 invalidateQueries 或 removeQueries 清除用户数据缓存，强制 Header 重新发起查询。
3. 简化 queryKey：直接使用固定字符串数组作为 queryKey，无需用 ref 包裹。

修改后的完整代码 #

import { useQuery, useQueryClient } from '@tanstack/vue-query'; // 确保导入 useQueryClient

// ... 其他导入代码

const queryClient = useQueryClient(); // 获取 QueryClient 实例

const { data, isLoading, error } = useQuery({
  queryKey: ['userData'], // 直接使用固定数组作为查询键
  queryFn: async () => {
    const response = await makeReq.get(`users/data`, {
      withCredentials: true,
    });
    return response.data;
  },
});

const logout = async () => {
  try {
    const result = await Swal.fire({
      title: "Tem certeza que deseja sair?",
      text: "Você terá que refazer o login",
      icon: "warning",
      showCancelButton: true,
      confirmButtonText: "Sim",
    });

    if (result.isConfirmed) {
      await makeReq.post("users/logout", {}, { withCredentials: true });
      
      // 失效用户数据查询，强制重新获取
      queryClient.invalidateQueries({ queryKey: ['userData'] });
      // 或者直接移除缓存：queryClient.removeQueries({ queryKey: ['userData'] })
      
      // 直接跳转，无需延迟
      await router.push("/");
    }
  } catch (err) {
    Swal.fire({
      title: "Ops... Erro interno",
      text: "Volte mais tarde",
      icon: "error",
      showCancelButton: false,
      confirmButtonText: "Voltar",
    });
    console.log(err);
  }
};

关键改动说明 #

• useQueryClient：用于操作 TanStack Query 的缓存，是失效或清除查询的核心工具。
• invalidateQueries：标记 ['userData'] 对应的查询为失效，Header 组件的 useQuery 会自动重新发起请求。此时因已登出，接口会返回未登录状态，Header 就能展示正确内容。
• 移除 setTimeout：登出请求完成后立即跳转是安全的，避免延迟导致的旧状态残留问题。
• 简化 queryKey：固定的查询键更易维护，且能准确匹配要操作的缓存。

内容的提问来源于stack exchange，提问作者rodrigo