添加 vuex 状态管理

web-vue/package.json

@@ -14,7 +14,8 @@
     "qs": "^6.9.4",
     "sha1": "^1.1.1",
     "vue": "^2.6.11",
-    "vue-router": "^3.4.8"
+    "vue-router": "^3.4.8",
+    "vuex": "^3.5.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

web-vue/src/main.js

@@ -6,11 +6,13 @@ import 'ant-design-vue/dist/antd.css';
 import './assets/reset.css';
 
 import router from './router';
+import store from './store';
 
 Vue.config.productionTip = false;
 Vue.use(Antd);
 
 new Vue({
   router,
+  store,
   render: h => h(App),
 }).$mount('#app')

web-vue/src/pages/layout/index.vue

@@ -44,16 +44,23 @@
         :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
       >
         Content
+        {{ getToken }}
       </a-layout-content>
     </a-layout>
   </a-layout>
 </template>
 <script>
+import { mapGetters } from 'vuex';
 export default {
   data() {
     return {
       collapsed: false
     }
+  },
+  computed: {
+    ...mapGetters([
+      'getToken'
+    ])
   }
 }
 </script>

web-vue/src/pages/login/index.vue

@@ -63,8 +63,9 @@ export default {
                 message: res.msg,
                 duration: 2
               });
+              this.$store.dispatch('login');
               // 跳转主页面
-              this.$router.push({ path: '/' })
+              this.$router.push({ path: '/' });
             }
           })
         }

web-vue/src/store/index.js

@@ -0,0 +1,14 @@
+import Vuex from 'vuex';
+import Vue from 'vue';
+
+import user from './modules/user';
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+  modules: {
+    user
+  }
+})
+
+export default store

web-vue/src/store/modules/user.js

@@ -0,0 +1,25 @@
+const TOKEN_KEY = 'JpomToken';
+
+const user = {
+  state: {
+    token: localStorage.getItem(TOKEN_KEY)
+  },
+  mutations: {
+    setToken(state, token) {
+      state.token = token
+    }
+  },
+  actions: {
+    login({commit}, token) {
+      commit('setToken', token);
+      localStorage.setItem(TOKEN_KEY, token);
+    }
+  },
+  getters: {
+    getToken(state) {
+      return state.token;
+    }
+  }
+}
+
+export default user