修改了api集中化 搞定了vuex

src/components/Menu.vue

@@ -2,8 +2,8 @@
     <div class="menu">
         <div class="user" style="overflow: hidden;">
             <div class="user" :class="{'seltop': selnum == 0}">
-                <img src="" alt="" class="head">
-                <div class="name">name</div>
+                <img :src="userinfo.head" alt="" class="head">
+                <div class="name">{{userinfo.username}}</div>
             </div>
         </div>
         
@@ -50,7 +50,6 @@
         .head{
             width: 57px;
             height: 57px;
-            background-color: #0f0;
             margin-bottom: 15px;
             border-radius: 50%;
         }
@@ -117,9 +116,9 @@
 }
 </style>
 <script lang="ts">
-import { userinfo } from '@/api';
 import router from '@/router';
-import { defineComponent, ref } from 'vue';
+import store from '@/store';
+import { computed, defineComponent, ref } from 'vue';
 
 export default defineComponent({
     setup(){
@@ -170,6 +169,9 @@ export default defineComponent({
         ]
         // 当前选中的index
         const selnum = ref(0);
+
+        const userinfo = computed(() => store.state.userinfo)
+        console.log(userinfo.value)
         /**
          * 跳转路由与赋值对应的下标
          * @param index 选中的下标 方便赋值与跳转
@@ -183,13 +185,12 @@ export default defineComponent({
 
         }
 
-        userinfo().then((res)=>{
-            console.log(res)
-        })
+      
         return{
             list,
             routeto,
-            selnum
+            selnum,
+            userinfo
         }
     }
 })