在看了 4-15 后，实现了退出登录，跳转到登录页，但是此时手动刷新网页，登录信息用户名这些就会显示在首页，并且跳转到首页。据分析应该是App.vue里的如下代码造成：

getUserInfo()
  .then((res) => {
    setUserinfo(res.data);
  })
  .catch((err) => {
    console.log(err);
  });

想实现用户点击退出登录后即使手动刷新网页当前也是处于未登录状态，于是在pinia里加了一个判断当前是否登录的状态语句，具体代码如下：

import { defineStore } from "pinia";
import { reactive, ref } from "vue";
import { getUserInfo } from "@/api/userApi";

// 写法一
// export const useCountStore = defineStore("user", {
//   state: () => {
//     return {
//       // 定义 userinfo 包括用户名和昵称
//       userinfo: {
//         username: "",
//         nickname: "",
//       },
//     };
//   },
// });

// 写法二
export const useUserStore = defineStore("user", () => {
  // 定义 userinfo 包括用户名和昵称
  const userInfo = reactive({
    username: "",
    nickname: "",
    // 判断当前是否登录
    loginstatus: localStorage.getItem("loginstatus") || false,
  });

  // 设置用户信息
  function setUserinfo({ username, nickname }) {
    userInfo.username = username;
    userInfo.nickname = nickname;
  }
  // 清空用户信息
  function clearUserinfo() {
    userInfo.username = "";
    userInfo.nickname = "";
  }
  // 设置登录状态
  function setLoginStatus(loginstatus) {
    userInfo.loginstatus = loginstatus;
  }
  // 情况登录状态
  return {
    userInfo,
    setUserinfo,
    clearUserinfo,
    setLoginStatus,
  };
});

然后想着当用户点击登录和注销时，分别调用：
登录：

setLoginStatus(true);
localStorage.setItem("loginstatus", true);

点击注销后：

setLoginStatus(false);
localStorage.setItem("loginstatus", false);

最后更改App.vue里获取用户信息的逻辑如下：

const { setUserinfo, userInfo } = useUserStore();
onMounted(() => {
  console.log(userInfo.loginstatus);
  if (userInfo.loginstatus) {
    getUserInfo()
      .then((res) => {
        setUserinfo(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }
});

通过以上修改，不难发现，当用户点击注销后，pinia里的loginstatus状态确实变为了false，并且刷新后确实是处于未登录状态的不会显示用户名，也不会自动跳转到首页；但是当用户输入完用户名和密码点击登录后，跳转到了首页，pinia里面的loginstatus也确实变为了true，但是首页顶部原本该显示用户名的地方还是显示了登录字样，需要通过手动刷新页面后才会显示用户名。
对于以上问题，想请教一下老师，我这边该如何解决才能实现当用户点击注销后即使手动刷新网页，当前也还是处于未登录状态。当用户点击登录后其首页顶部个人区域显示当前用户名，而不需要手动刷新后才会显示