添加全局状态管理

src/App.vue

@@ -6,6 +6,15 @@
 
 <script setup lang="ts">
 import BasicLayout from "./layouts/BasicLayouts.vue"
+import { healthUsingGet } from '@/api/mainController.ts'
+import {useLoginUserStore} from "@/stores/useLoginUserStore.ts";
+
+const loginUserStore = useLoginUserStore()
+loginUserStore.fetchLoginUser()
+
+healthUsingGet().then((res) => {
+  console.log(res)
+})
 </script>
 
 <style>

src/components/GlobalHeader.vue

@@ -19,7 +19,12 @@
       </a-col>
       <a-col flex="120px">
         <div class="user-login-status">
-          <a-button type="primary" href="/user/login">登录</a-button>
+          <div v-if="loginUserStore.loginUser.id">
+            {{ loginUserStore.loginUser.userName ?? '无名' }}
+          </div>
+          <div v-else>
+            <a-button type="primary" href="/user/login">登录</a-button>
+          </div>
         </div>
       </a-col>
     </a-row>
@@ -30,6 +35,9 @@
 import { h, ref } from 'vue'
 import { HomeOutlined } from '@ant-design/icons-vue'
 import { useRouter } from 'vue-router'
+import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'
+
+const loginUserStore = useLoginUserStore()
 
 const items = [
   {

src/stores/counter.ts

@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})

src/stores/useLoginUserStore.ts

@@ -0,0 +1,26 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useLoginUserStore = defineStore('loginUser', () => {
+  const loginUser = ref<any>({
+    userName: '未登录',
+  })
+
+  async function fetchLoginUser() {
+    // todo 由于后端还没提供接口，暂时注释
+    // const res = await getCurrentUser();
+    // if (res.data.code === 0 && res.data.data) {
+    //   loginUser.value = res.data.data;
+    // }
+    // 测试用户登录，3 秒后自动登录
+    setTimeout(() => {
+      loginUser.value = { userName: '测试用户', id: 1 }
+    }, 3000)
+  }
+
+  function setLoginUser(newLoginUser: any) {
+    loginUser.value = newLoginUser
+  }
+
+  return { loginUser, setLoginUser, fetchLoginUser }
+})