为用户信息展示页面添加逻辑

src/views/authentication/Profile.vue

@@ -1,16 +1,32 @@
 <script setup>
-import {ref} from 'vue';
+import {onMounted, ref} from 'vue';
 import 'element-plus/dist/index.css';
+import {useStore} from 'vuex';
 
-const nickname = ref('admin');
+const store = useStore();
-const phoneNumber = ref('15888888888');
-const email = ref('ry@163.com');
-const department = ref('研发部门 / 董事长');
-const role = ref('超级管理员');
-const createdAt = ref('2021-09-21 17:00:35');
 
+const nickname = ref('');
+const phoneNumber = ref('');
+const email = ref('');
+const department = ref('');
+const role = ref('');
+const createdAt = ref('');
+
+onMounted(async () => {
+  const response = await store.dispatch('authentication/fetchUserProfile');
+  if (response.status === 200) {
+    const user = response.data;
+    nickname.value = user.nickname;
+    phoneNumber.value = user.phoneNumber;
+    email.value = user.email;
+    department.value = user.department;
+    role.value = user.role;
+    createdAt.value = user.createdAt;
+  }
+});
 </script>
 
+
 <template>
   <div class="profile-container">
     <div class="profile-box">