【vue】个人信息详情页修改以及同步

之前做过一次项目又忘了，这次记录一下

也就是这个”个人信息"的小细节
思路：
在登录成功直接保存用户基本信息到全局user，随后在需要获取的时候再从user中取出。退出账户的时候删除user的相关信息
第一步：在登录成功直接保存用户基本信息到全局user
LoginView.vue登录页面：

<script>
  methods: {
    login() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          request.post("/user/login", this.form).then((res) => {
            if (res.code === 0) {
              this.$message.success("登录成功");
              localStorage.setItem("user", JSON.stringify(res.data)); //存储用户信息到浏览器
              this.$router.push("/"); //登录成功后进行页面跳转
              console.log("Login" + res.data.nickname);
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
  },
};
</script>

在登录成功后浏览器已经成功存储user

第二步：在需要获取的时候再从user中取出
例如：我在header中需要用户的昵称

那么我就在header组件中取出user
header头部组件

<script >

export default {
 ...
  data() {
    return {
      user: JSON.parse(localStorage.getItem("user")),
    }
  },
...
</script>

再在页面中调用

<span class="el-dropdown-link" style="font-size: 16px">{{ user.nickname }}</span>

于是就成功取出用户的昵称

在账户退出时也不要忘了删本地存储信息

<script>
	methods: {
	    logout() {
	      this.$router.push("/login");
	      localStorage.removeItem("user");
	      this.$message.success("退出成功");
	    },
	  },
</script>

其他的信息，比如头像也是以此类推

个人详情信息也是一样

  created() {
    const username = this.user.username;
    if (!username) {
      this.$message.error("无法获取用户信息");
      return;
    }
    request.get("/user/getUsername/" + username).then((res) => {
      this.form = res.data;
    });
  },