放假不停歇，趁着假期学习下VUE3相关的内容，一方面是自己保持活力，另一方面也是工作需要，本系列是我的自学教程，如果有从0开始学习VUE3的，可以跟着一起练习下，毕竟前端我也是泥腿子出身，这一系列会使用Vite、TS、Pinia、Element-Plus等新知识点，既是查漏补缺，也是知识分享。
代码地址：
https://github.com/anjoy8/bcvp.vue3.git
这是每篇文章一节课一个分支，方便大家学习，会慢慢的将blog.admin项目进行翻新，使用的后端接口还是BlogCore。
系列文章：
本文参考的是开源项目
https://gitee.com/HalseySpicy/Geeker-Admin/tree/template
分步骤讲解前端框架中的每一个核心逻辑，讲一下顶部Header右侧的功能区域——用户个人中心模块，效果图：
<template><div class="tool-bar-ri"><div class="header-icon"><Message id="message" /></div><span class="username">{{ username }}</span><Avatar /></div></template><script setup lang="ts">import { computed } from "vue";import { useUserInfoStore } from "@/stores/userInfo";import Message from "./components/Message.vue";import Avatar from "./components/Avatar.vue";const userStore = useUserInfoStore();const username = computed(() => userStore.user?.uRealName ?? '管理员');</script>
根据需要，今天只演示和保留了两个功能，分别是站内信Message和头像缩略图Avatar组件，基本骨架就这两个子组件，其他功能以后可以根据情况追加。
主要包括头像、个人信息、修改密码和退出登录，前三个都是模拟的，还没有对接后端数据接口，以后再补充吧，重点说一下退出登录功能，稍微有一点逻辑在里边，
新建文件src\layouts\components\Header\components\Avatar.vue
<template><el-dropdown trigger="click"><div class="avatar"><img src="@/assets/images/avatar.gif" alt="avatar" /></div><template #dropdown><el-dropdown-menu><el-dropdown-item @click="openDialog('infoRef')"><el-icon><User /></el-icon>个人信息</el-dropdown-item><el-dropdown-item @click="openDialog('passwordRef')"><el-icon><Edit /></el-icon>修改密码</el-dropdown-item><el-dropdown-item divided @click="logout"><el-icon><SwitchButton /></el-icon>退出登录</el-dropdown-item></el-dropdown-menu></template></el-dropdown><!-- 个人信息 --><InfoDialog ref="infoRef"></InfoDialog><!-- 修改密码 --><PasswordDialog ref="passwordRef"></PasswordDialog></template><script setup lang="ts">import { ref } from "vue";import { useRouter } from "vue-router";import { useAuthStore } from "@/stores/auth";import { useTabsStore } from "@/stores/modules/tabs";import { ElMessageBox, ElMessage } from "element-plus";import InfoDialog from "./InfoDialog.vue";import PasswordDialog from "./PasswordDialog.vue";const router = useRouter();const userStore = useAuthStore();const tabStore = useTabsStore();// 退出登录const logout = () => {ElMessageBox.confirm("您是否确认退出登录?", "温馨提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(async () => {// 1.执行退出登录接口，非必需// await logoutApi();// 2.清除 TokenuserStore.setToken("");tabStore.closeMultipleTab();// 3.重定向到登陆页router.replace('/login');ElMessage.success("退出登录成功！");});};// 打开修改密码和个人信息弹窗const infoRef = ref<InstanceType<typeof InfoDialog> | null>(null);const passwordRef = ref<InstanceType<typeof PasswordDialog> | null>(null);const openDialog = (ref: string) => {if (ref == "infoRef") infoRef.value?.openDialog();if (ref == "passwordRef") passwordRef.value?.openDialog();};</script>
再补充下两个子组件——个人信息和修改密码，目前就是一个弹窗，以后再联调接口：
@ -0,0 +1,22 @@<template><el-dialog v-model="dialogVisible" title="修改密码" width="500px" draggable><span>This is Password</span><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="dialogVisible = false">确认</el-button></span></template></el-dialog></template><script setup lang="ts">import { ref } from "vue";const dialogVisible = ref(false);const openDialog = () => {dialogVisible.value = true;};defineExpose({ openDialog });</script>
这里需要理解一下VUE3的写法，比如：
defineExpose 是 <script setup> 特有的 API，用于公开组件的内部逻辑给父组件。通过这个指令，父组件可以调用子组件公开的方法。在这里，openDialog 方法被暴露出去，因此父组件可以通过引用来调用该方法，来改变 dialogVisible 的状态。
这段代码的主要作用是定义一个在内部管理对话框显示状态的逻辑，并将打开对话框的功能暴露出去，以便父组件可以控制子组件对话框的显示。
在之前，写过一个用户信息到状态管理Pinia中的方法，地址是
src\stores\userInfo.ts。之前的逻辑是手动将数据放到localstorage中，手动来维护数据，但是这样会有一个问题，一刷新，当前账号的账号信息就会丢失，你可能会好奇，既然数据已经持久化到localstorage里了，为何刷新还会丢失，这是因为我们目前页面渲染的时候，用的是Pinia，不是像Vue2的时候，是手动从localstorage中取值的，如果要用Pinia来获取用户数据，而又要保证刷新页面不丢失，还是用上一节课我们说到的Pinia插件——pinia-plugin-persistedstate
修改的内容大概是这样的：
import { defineStore } from 'pinia';import piniaPersistConfig from "@/stores/config/piniaPersist";export const useUserInfoStore = defineStore({id: 'userinfo',state: (): { user: User.UserResponse | null } => ({user: null}),actions: {setUser(user: User.UserResponse) {this.user = user;},clearUser() {this.user = null;localStorage.removeItem('userinfo');}},persist: piniaPersistConfig("userinfo")});
所以，这个例子又一次证明，使用Pinia和localstorage可以完美的实现对所有的数据的操作和管理操作，还是建议多多使用。
到这里就比较简单了，直接引用即可：
可以看到最终的渲染效果，没问题，试试路由跳转和页面刷新都没问题
下篇文章我们继续对页面优化，实现第二种布局方式——横向布局，敬请期待。
