有实力自适应网站建设哪家好,二建报考条件,wordpress中文视频插件,如何做自己公司的网站文章目录 前言一、准备1. 获取用户信息2. 存储用户信息3. 加载用户信息 二、用户信息1.昵称2.头像 三、展示总结 前言
这里我们来展示用户昵称和头像。 一、准备
1. 获取用户信息
export const userInfoService (){return request.get(/user/info)
}2. 存储用户信息
i… 文章目录 前言一、准备1. 获取用户信息2. 存储用户信息3. 加载用户信息 二、用户信息1.昵称2.头像 三、展示总结 前言
这里我们来展示用户昵称和头像。 一、准备
1. 获取用户信息
export const userInfoService (){return request.get(/user/info)
}2. 存储用户信息
import { ref } from vue
import { defineStore } from piniaconst useUserInfoStore defineStore(userInfo, () {const userInfo ref({})const setUserInfo (info){userInfo.valueinfo}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.jsonMounted(async () {let result await userInfoService()if (result.code 0) {useUserInfoStore().setUserInfo(result.data)}
})二、用户信息
1.昵称
template #dropdownel-dropdown-menudiv v-ifuseUserInfoStore().getUserInfo().nickname style text-align: center; span classaccent data-v-6b0c93fdstrong你好,{{useUserInfoStore().getUserInfo().nickname }}/strong/span/divel-dropdown-item commandprofile :iconUser基本资料/el-dropdown-itemel-dropdown-item commandavatar :iconCrop更换头像/el-dropdown-itemel-dropdown-item commandpassword :iconEditPen重置密码/el-dropdown-itemel-dropdown-item commandlogout :iconSwitchButton退出登录/el-dropdown-item/el-dropdown-menu
/template2.头像
span classel-dropdown__boxel-avatar :srcuseUserInfoStore().getUserInfo().userPic?avatar/useUserInfoStore().getUserInfo().userPic:avatar /el-iconCaretBottom //el-icon
/span三、展示 效果如下图所示 总结
回到顶部
