即使更换时，vue组件仍保持旧状态

Question

  const queryKey = ref("userData");

  const { data, isLoading, error } = useQuery({
    queryKey: [queryKey], // Chave única para identificar a consulta
    queryFn: async () => {
      const response = await makeReq.get(`users/data`, {
        withCredentials: true,
      });
      return response.data; // Retornando os dados da resposta
    },
  });

  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 });
        queryKey.value = "";

        setTimeout(() => {
          router.push("/");
        }, 1000);
      }
    } catch (err) {
      Swal.fire({
        title: "Ops... Erro interno",
        text: "Volte mais tarde",
        icon: "error",
        showCancelButton: false,
        confirmButtonText: "Voltar",
      });
      console.log(err);
    }
  };

上面的代码将是我的标题的一部分，我在应用程序中的某些地方使用此组件，我的意图是，每当用户通过注销功能登录时，它都会将其扔到主路由上”/是，当我这样做时，旧状态仍然存在，并且标头不会显示我希望显示的数据。

我试图使用查询无效，但显然我不太了解它的工作原理，即使我真的相信它是对的，但它行不通了...

一个重要的细节，上面的代码有效，但是，显然有问题，我似乎不正确地以这种方式使用settimeout。

try：

Answer 1

queryClient.invalidateQueries({ queryKey: ["userData"] })

vue查询可以灌输新的数据。

和完全清除缓存的用户数据。