【第24章】Vue实战篇之用户信息展示

编程基础 • 2025-01-05 19:57 • 阅读 10

【第24章】Vue实战篇之用户信息展示这里我们来展示用户昵称和头像

文章目录

前言
一、准备
二、用户信息
- 1.昵称
- 2.头像
三、展示
总结

前言

这里我们来展示用户昵称和头像。

一、准备

1. 获取用户信息

export const userInfoService = ()=>{ 
    return request.get('/user/info') }

2. 存储用户信息

import { 
    ref } from 'vue' import { 
    defineStore } from 'pinia' const useUserInfoStore = defineStore('userInfo', () => { 
    const userInfo = ref({ 
   }) const setUserInfo = (info)=>{ 
    userInfo.value=info } const getUserInfo = ()=>{ 
    return userInfo.value } const removeUserInfo = ()=>{ 
    userInfo.value={ 
   } } return { 
   userInfo, setUserInfo, getUserInfo, removeUserInfo } },{ 
   persist:true}) export default useUserInfoStore

3. 加载用户信息

完成上面两步的调用

import { 
    onMounted } from 'vue' import { 
    userInfoService } from '@/api/user.js' import useUserInfoStore from '@/stores/userInfo.js' onMounted(async () => { 
    let result = await userInfoService() if (result.code == 0) { 
    useUserInfoStore().setUserInfo(result.data) } })

二、用户信息

1.昵称

<template #dropdown> <el-dropdown-menu> <div v-if="useUserInfoStore().getUserInfo().nickname" style=" text-align: center; "><span class="accent" data-v-6b0c93fd=""><strong>你好,{ 
  
    
  { useUserInfoStore().getUserInfo().nickname }}</strong></span></div> <el-dropdown-item command="profile" :icon="User">基本资料</el-dropdown-item> <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item> <el-dropdown-item command="password" :icon="EditPen">重置密码</el-dropdown-item> <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item> </el-dropdown-menu> </template>

2.头像

<span class="el-dropdown__box"> <el-avatar :src="useUserInfoStore().getUserInfo().userPic?'avatar/'+useUserInfoStore().getUserInfo().userPic:avatar" /> <el-icon> <CaretBottom /> </el-icon> </span>

三、展示

效果如下图所示

在这里插入图片描述

总结

今天的文章【第24章】Vue实战篇之用户信息展示分享到此就结束了，感谢您的阅读。

编程小号

【信息学奥赛】1019：浮点数向零舍入（C++）

上一篇 2025-01-05 20:01

八度音阶和频率的关

下一篇 2025-01-05 19:57

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ji-chu/102295.html