BCVP.VUE3系列第十课：个人中心模块

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组件，基本骨架就这两个子组件，其他功能以后可以根据情况追加。

2、设计Avatar组件布局

主要包括头像、个人信息、修改密码和退出登录，前三个都是模拟的，还没有对接后端数据接口，以后再补充吧，重点说一下退出登录功能，稍微有一点逻辑在里边，

新建文件srclayoutscomponentsHeadercomponentsAvatar.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.清除 Token userStore.setToken(""); tabStore.closeMultipleTab();
 // 3.重定向到登陆页 router.replace('/login'); ElMessage.success("退出登录成功！"); });};
// 打开修改密码和个人信息弹窗const infoRef = reftypeof InfoDialog> | null>(null);const passwordRef = reftypeof 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 Passwordspan> 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 是特有的 API，用于公开组件的内部逻辑给父组件。通过这个指令，父组件可以调用子组件公开的方法。在这里，openDialog 方法被暴露出去，因此父组件可以通过引用来调用该方法，来改变 dialogVisible 的状态。

这段代码的主要作用是定义一个在内部管理对话框显示状态的逻辑，并将打开对话框的功能暴露出去，以便父组件可以控制子组件对话框的显示。

3、持久化用户信息到状态管理

在之前，写过一个用户信息到状态管理Pinia中的方法，地址是

srcstoresuserInfo.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可以完美的实现对所有的数据的操作和管理操作，还是建议多多使用。

4、模板文件引用，渲染效果

到这里就比较简单了，直接引用即可：

可以看到最终的渲染效果，没问题，试试路由跳转和页面刷新都没问题

下篇文章我们继续对页面优化，实现第二种布局方式——横向布局，敬请期待。

BCVP.VUE3系列第十课：个人中心模块

BCVP.VUE3系列第十一课：基于总线实现框架多种布局样式

BCVP.VUE3系列第九课：实现tabs标签栏