# feat:使用pinia管理用户的登陆状态

src/layout/CommonLayout.vue

@@ -21,10 +21,19 @@
         </el-menu>
         <div class="header-right">
           <template v-if="login">
-            <span class="username">{{ loginUserStore.loginUser?.user?.name }}</span>
+<!--            <span class="username"></span>-->
+            <el-dropdown placement="bottom">
+              <el-button> {{ loginUserStore.loginUser?.user?.name }} </el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item>个人信息</el-dropdown-item>
+                  <el-dropdown-item @click="logoutHandler">退出</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
           </template>
           <template v-else>
-            <el-button type="primary" size="small">登录</el-button>
+            <el-button type="primary" size="small" @click="loginHandler">登录</el-button>
             <el-button size="small">注册</el-button>
           </template>
         </div>
@@ -40,32 +49,26 @@
 </template>
 
 <script setup lang="ts">
-import {computed, onMounted, ref} from 'vue'
+import {computed, ref} from 'vue'
 import {useLoginUserStore} from "../store";
-import type {User} from "../type";
 const title = ref("标题")
 const loginUserStore = useLoginUserStore()
 const login = computed(() => loginUserStore.loginUser.isLogin)
 //todo:模拟登陆
-console.log(loginUserStore.loginUser)
-onMounted(()=>{
-  setTimeout(()=>{
-    console.log(1)
-    let user:User = {
-      id:"",
-      name:"张三",
-      role:"user"
-    }
-    loginUserStore.loginSuccess(user);
-    console.log(loginUserStore.loginUser)
-  },3000)
-
-})
-
+const loginHandler = () => {
+  loginUserStore.loginSuccess({
+    id:"",
+    name:"张三",
+    role:"user"
+  });
+}
 let activeIndex = ref('/')
 const handleSelect = () => {
   //todo: 处理菜单选择
 }
+const logoutHandler = () => {
+  loginUserStore.logoutUser()
+}
 </script>
 <style scoped>
 .common-layout {