fix：个人中心修改信息后，左侧没变化

Author: YunaiV

src/views/Profile/Index.vue

@@ -7,13 +7,13 @@
           <span>{{ t('profile.user.title') }}</span>
         </div>
       </template>
-      <ProfileUser />
+      <ProfileUser ref="profileUserRef" />
     </el-card>
     <el-card class="user ml-3 w-2/3" shadow="hover">
       <div>
         <el-tabs v-model="activeName" class="profile-tabs" style="height: 400px" tab-position="top">
           <el-tab-pane :label="t('profile.info.basicInfo')" name="basicInfo">
-            <BasicInfo />
+            <BasicInfo @success="handleBasicInfoSuccess" />
           </el-tab-pane>
           <el-tab-pane :label="t('profile.info.resetPwd')" name="resetPwd">
             <ResetPwd />
@@ -32,6 +32,12 @@ import { BasicInfo, ProfileUser, ResetPwd, UserSocial } from './components'
 const { t } = useI18n()
 defineOptions({ name: 'Profile' })
 const activeName = ref('basicInfo')
+const profileUserRef = ref()
+
+// 处理基本信息更新成功
+const handleBasicInfoSuccess = async () => {
+  await profileUserRef.value?.refresh()
+}
 </script>
 <style scoped>
 .user {

src/views/Profile/components/BasicInfo.vue

@@ -28,6 +28,12 @@ defineOptions({ name: 'BasicInfo' })
 const { t } = useI18n()
 const message = useMessage() // 消息弹窗
 const userStore = useUserStore()
+
+// 定义事件
+const emit = defineEmits<{
+  (e: 'success'): void
+}>()
+
 // 表单校验
 const rules = reactive<FormRules>({
   nickname: [{ required: true, message: t('profile.rules.nickname'), trigger: 'blur' }],
@@ -82,6 +88,8 @@ const submit = () => {
       message.success(t('common.updateSuccess'))
       const profile = await init()
       userStore.setUserNicknameAction(profile.nickname)
+      // 发送成功事件
+      emit('success')
     }
   })
 }

src/views/Profile/components/ProfileUser.vue

@@ -60,6 +60,12 @@ const getUserInfo = async () => {
   const users = await getUserProfile()
   userInfo.value = users
 }
+
+// 暴露刷新方法
+defineExpose({
+  refresh: getUserInfo
+})
+
 onMounted(async () => {
   await getUserInfo()
 })