1.添加pinia缓存用户信息

stores/userInfo.js

import {defineStore} from 'pinia'import {ref} from 'vue'const useUserInfoStore = defineStore('userInfo',()=>{    //定义状态相关的内容    const info = ref({})    const setInfo = (newInfo)=>{        info.value = newInfo    }    const removeInfo = ()=>{        info.value = {}    }    return {info,setInfo,removeInfo}},{persist:true})export default useUserInfoStore;

2.用户详细信息接口

//获取用户详细信息export const userInfoService = ()=>{    return request.get('/user/userInfo')}//修改个人信息export const userInfoUpdateService = (userInfoData)=>{   return request.put('/user/update',userInfoData)}//修改头像export const userAvatarUpdateService = (avatarUrl)=>{    const params = new URLSearchParams();    params.append('avatarUrl',avatarUrl)    return request.patch('/user/updateAvatar',params)}

3.调用函数获取用户信息

import {userInfoService} from '@/api/user.js'import useUserInfoStore from '@/stores/userInfo.js'import {useTokenStore} from '@/stores/token.js'const tokenStore = useTokenStore();const userInfoStore = useUserInfoStore();//调用函数,获取用户详细信息const getUserInfo = async()=>{    //调用接口    let result = await userInfoService();    //数据存储到pinia中    userInfoStore.setInfo(result.data);}getUserInfo();

4.导航栏显示个人信息

<!-- 头部区域 --><el-header>    <div>黑马程序员：<strong>{{ userInfoStore.info.nickname }}</strong></div>    <!-- 下拉菜单 -->    <!-- command: 条目被点击后会触发,在事件函数上可以声明一个参数,接收条目对应的指令 -->    <el-dropdown placement="bottom-end" @command="handleCommand">        <span class="el-dropdown__box">            <el-avatar :src="userInfoStore.info.userPic? userInfoStore.info.userPic:avatar" />            <el-icon>                <CaretBottom />            </el-icon>        </span>        <template #dropdown>            <el-dropdown-menu>                <el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item>                <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>                <el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item>                <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>            </el-dropdown-menu>        </template>    </el-dropdown></el-header>

5.下拉菜单功能

el-dropdown-item里的command要和路由对应起来

下拉菜单绑定如下函数

<el-dropdown placement="bottom-end" @command="handleCommand">

//条目被点击后,调用的函数import {useRouter} from 'vue-router'const router = useRouter();import {ElMessage,ElMessageBox} from 'element-plus'const handleCommand = (command)=>{    //判断指令    if(command === 'logout'){        //退出登录        ElMessageBox.confirm(        '您确认要退出吗?',        '温馨提示',        {            confirmButtonText: '确认',            cancelButtonText: '取消',            type: 'warning',        }    )        .then(async () => {            //退出登录            //1.清空pinia中存储的token以及个人信息            tokenStore.removeToken()            userInfoStore.removeInfo()            //2.跳转到登录页面            router.push('/login')            ElMessage({                type: 'success',                message: '退出登录成功',            })                    })        .catch(() => {            ElMessage({                type: 'info',                message: '用户取消了退出登录',            })        })    }else{        //路由        router.push('/user/'+command)    }}