9-9 利用 vuex 保存用户信息，方便其他组件利用用户的登录信息。

待解决问题：刷新后用户信息消息

web/src/components/the-footer.vue

 <template>
   <a-layout-footer style="text-align: center">
-    Ant Design ©2018 Created by Ant UED
+    <p v-if="currUser.name">Welcome, {{currUser.name}}</p>
+    --- Fairy Wiki ---
   </a-layout-footer>
 </template>
 
 <script lang="ts">
-import { defineComponent} from "vue";
+import {computed, defineComponent} from "vue";
+import store from "@/store";
 
 export default defineComponent({
-  name: 'the-footer'
+  name: 'the-footer',
+  setup() {
+    const currUser = computed(() => store.state.localUser);
+
+    return {
+      currUser
+    }
+  }
 })
 
 </script>

web/src/components/the-header.vue

@@ -51,6 +51,7 @@
 import { defineComponent, ref } from "vue";
 import axios from 'axios';
 import { message } from 'ant-design-vue';
+import store from "@/store";
 
 declare let hexMd5: any;
 declare let KEY: any;
@@ -84,6 +85,7 @@ export default defineComponent({
         if (respData.code === 0) {
           loginModalVisible.value = false;
           currUser.value = respData.data;
+          store.commit("setLocalUser", currUser.value);
           message.success("登录成功！");
         } else {
           message.error(respData.msg);

web/src/store/index.ts

 import { createStore } from 'vuex'
 
-export default createStore({
+const store = createStore({
   state: {
+    localUser: {
+      name: ''
+    }  // 表示当前登录的用户及其信息
   },
   mutations: {
+    setLocalUser(state, user) {
+      state.localUser = user;
+    }
   },
   actions: {
   },
   modules: {
   }
 })
+
+
+export default store;
\ No newline at end of file