vue-admin-template显示用户的名称和头像

显示用户头像和名称，就是将vuex中的用户信息显示到顶部组件。

1.用户信息在store/modules/user.js下

2.再打开getters,引用了状态中保存的用户信息

const getters = {

sidebar: state => state.app.sidebar,

device: state => state.app.device,

token: state => state.user.token,

userId: state => state.user.userInfo.id,

avatar: state => state.user.userInfo.staffPhoto,

name: state => state.user.userInfo.name

}

export default getters

3.找到navbar,在layout下

computed: {

// 引入头像和用户姓名

...mapGetters([

'sidebar',

'avatar',

'name'

])

},

<template>
<div class="navbar">
<hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

<breadcrumb class="breadcrumb-container" />

<div class="right-menu">
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
<span style="name">{{ name }}</span>
<i class="el-icon-setting" />
</div>
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<router-link to="/">
<el-dropdown-item>
        Home
</el-dropdown-item>
</router-link>
<a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
<el-dropdown-item>Github</el-dropdown-item>
</a>
<a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
<el-dropdown-item>Docs</el-dropdown-item>
</a>
<el-dropdown-item divided @click.native="logout">
<span style="display:block;">Log Out</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>

<script>
import { mapGetters } from 'vuex'
        import Breadcrumb from '@/components/Breadcrumb'
        import Hamburger from '@/components/Hamburger'

        export default {
        components: {
        Breadcrumb,
        Hamburger
        },
        computed: {
        // 引入头像和用户姓名
        ...mapGetters([
        'sidebar',
        'avatar',
        'name'
        ])
        },
        methods: {
        toggleSideBar() {
        this.$store.dispatch('app/toggleSideBar')
        },
        async logout() {
        await this.$store.dispatch('user/logout')
        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
        }
        }
        }
</script>

<style lang="scss" scoped>
        .navbar {
        height: 50px;
        overflow: hidden;
        position: relative;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,21,41,.08);

        .hamburger-container {
        line-height: 46px;
        height: 100%;
        float: left;
        cursor: pointer;
        transition: background .3s;
        -webkit-tap-highlight-color:transparent;

        &:hover {
        background: rgba(0, 0, 0, .025)
        }
        }

        .breadcrumb-container {
        float: left;
        }

        .right-menu {
        float: right;
        height: 100%;
        line-height: 50px;

        &:focus {
        outline: none;
        }

        .right-menu-item {
        display: inline-block;
        padding: 0 8px;
        height: 100%;
        font-size: 18px;
        color: #5a5e66;
        vertical-align: text-bottom;

        &.hover-effect {
        cursor: pointer;
        transition: background .3s;

        &:hover {
        background: rgba(0, 0, 0, .025)
        }
        }
        }

        .avatar-container {
        margin-right: 30px;

        .avatar-wrapper {
        margin-top: 5px;
        position: relative;
        display: flex;
        align-items: center;
        .name {
        margin-right: 10px;
        font-size: 16px;
        }

        .el-icon-setting {
        font-size: 20px;
        }

        .user-avatar {
        cursor: pointer;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        }

        .el-icon-caret-bottom {
        cursor: pointer;
        position: absolute;
        right: -20px;
        top: 25px;
        font-size: 12px;
        }
        }
        }
        }
        }
</style>