vuex和sessionStorage实现用户登录信息保存

vuex部分

state: {
		user:sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : ''
	},
	mutations: {
		//获取用户信息
		getUser(state, user){
			state.user = user
			this.commit('saveUser')
		},
		//退出登录
		logoutINn(state,user){
			state.user = user;
			this.commit('saveUser')
		},
		//保存用户信息在本地
		saveUser(state){
			sessionStorage.setItem('user', JSON.stringify(state.user));
		}
	},

登录时获取到用户信息

    //获取个人信息
    getCenter() {
      this.api.getCenter().then((res) => {
        if (res.data.code == 1) {
          this.$store.commit("getUser", res.data.data);
        }
      });
    },

在其他地方使用

html

<div style="width: 100%" class="d-flex align-items-center justify-content-center">
              <img
                :src="user.avatar"
                style="width: 2.5rem; height: 2.5rem"
                class="obj-cover rounded-circle bg-light"
              />
            </div>
            <div class="name">{{ user.nickname }}</div>

js部分

import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      user: (state) => state.user,
    }),
  },
  methods: {
    //退出登录
    logout() {
      this.api.loginout().then((res) => {
        console.log(res.data.code);
        if (res.data.code == 1) {
          this.$message({
            message: "退出登录成功",
            type: "success",
          });
          this.$store.commit("logoutINn", "");
          this.$router.push({
            name: "Home",
          });
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },


  },
};