sisweb/src/views/headPortrait.vue

<template>
  <div class="head">
    <el-popover placement="bottom" width="200" trigger="click">
      <div class="border">
        <p id="character">已登录用户:</p>
        <p id="character-yh">{{ this.username == ""?this.name:this.username }}</p>
      </div>
      <el-divider></el-divider>
      <div class="btn">
        <el-link icon="el-icon-unlock" @click="loginout"
          >退出登录<i class="-icon--right"></i>
        </el-link>
      </div>

      <el-button
        style="border-radius: 50px"
        icon="el-icon-user-solid"
        type="warning"
        slot="reference"
      ></el-button>
    </el-popover>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";

export default {
  data() {
    return {
      name:localStorage.getItem('username')
    };
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters(["username"]),
  },
  mounted() {
    window.onload=function() {
       this.name = localStorage.getItem('username');
    }
  },
  methods: {
    ...mapMutations("user", ["REMOVE_TOKEN"]),
    loginout() {
      this.REMOVE_TOKEN();
    },
  },
};
</script>

<style>
.border {
  display: flex;
  justify-content: center;
  align-items: center;
}
#character {
  display: flex;

  font-size: 16px;
}
#character-yh {
  font-size: 25px;
  margin-left: 6px;
}
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>