登录页面token存入vuex

package-lock.json

@@ -14,7 +14,8 @@
         "flowbite": "^2.3.0",
         "vue": "^3.3.11",
         "vue-request": "^2.0.4",
-        "vue-router": "^4.2.5"
+        "vue-router": "^4.2.5",
+        "vuex": "^4.1.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.5.2",
@@ -2792,6 +2793,17 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vuex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
+      "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",

package.json

@@ -15,7 +15,8 @@
     "flowbite": "^2.3.0",
     "vue": "^3.3.11",
     "vue-request": "^2.0.4",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.2",

src/main.js

@@ -5,11 +5,13 @@ import router from './router'
 import 'ant-design-vue/dist/reset.css';
 import './assert/main.css'
 import 'flowbite';
+import store from './store' // 引入Vuex store
 
 const app = createApp(App)
 
 app.use(router)
 app.use(Antd)
+app.use(store)
 
 app.mount('#app')
 

src/store/index.js

@@ -0,0 +1,65 @@
+/*
+import Vue from 'vue'
+import Vuex from 'vuex'
+import request from '@/js/request.js'
+
+Vue.use(Vuex)
+export default new Vuex.Store({
+    state: {
+        tokenInfo: {}
+    },
+    mutations: {
+        setTokenInfo (state, newToken) {
+            state.tokenInfo = newToken
+        }
+    },
+    actions: {
+        async userLogin (context, formState) {
+            // context.commit('mSetTokenInfo', res.data.data)
+            try {
+                const res = await request.login(formState)
+                console.log(res)
+                console.log(context)
+                // 请求成功之后,保存token,所以调mutations函数
+                context.commit('setTokenInfo', res.data.data)
+            } catch (err) {
+                // console.log(err)
+                throw new Error()
+            }
+        }
+    },
+    modules: {
+    }
+})*/
+
+
+import {createStore} from 'vuex';
+import request from '@/js/request.js';
+
+const store = createStore({
+    state: {
+        tokenInfo: {}
+    },
+    mutations: {
+        setTokenInfo(state, newToken) {
+            state.tokenInfo = newToken;
+        }
+    },
+    actions: {
+        async userLogin(context, formState) {
+            try {
+                const res = await request.login(formState);
+                console.log(res);
+                console.log(context);
+                context.commit('setTokenInfo', res.data.data.token);
+            } catch (err) {
+                console.error(err);
+                throw new Error('登录失败');
+            }
+        }
+    },
+    modules: {
+    }
+});
+
+export default store;

src/views/AuthPage/Login.vue

@@ -29,7 +29,7 @@
                             <a-button href="" style="margin-left: 1vw" type="link" >忘记密码？</a-button>
                         </a-form-item>
                         <a-form-item>
-                            <a-button  :disabled="disabled" html-type="submit" size="large" style="margin-left: 5vw; margin-top: 1vh; margin-bottom: 1vh; background-color: dodgerblue; color: white;width: 10vw " @click="loginUser">
+                            <a-button html-type="submit" size="large" style="margin-left: 5vw; margin-top: 1vh; margin-bottom: 1vh; background-color: dodgerblue; color: white;width: 10vw " @click="loginUser">
                                 登录
                             </a-button>
                            <br>
@@ -61,9 +61,9 @@
 <script setup>
 import {reactive} from 'vue';
 import {message} from "ant-design-vue";
-import requests from "@/js/request.js";
 import {useRouter} from "vue-router";
 
+
 const router = useRouter()
 
 const formState = reactive({
@@ -75,7 +75,7 @@ const formState = reactive({
 function  SendRegister(){
     router.push('/Register');
 }
-function loginUser(){
+/*function loginUser(){
     console.log("formState:",formState)
     requests.login(formState).then((res) => {
         console.log(res)
@@ -101,7 +101,25 @@ function loginUser(){
         }
 
     });
+}*/
+
+
+
+
+async function loginUser () {
+  // console.log(this.user)
+  try {
+    await this.$store.dispatch('userLogin', formState)
+    message.success('登陆成功')
+  } catch (err) {
+    // console.log('err:', err)
+    message.warn('登陆失败l')
+  }
 }
+
+
+
+
 </script>
 <style scoped>
 * {