From c548b8dee90af0f5b1bda98640a2a9159ac939ec Mon Sep 17 00:00:00 2001
From: GUjiYN <2946459904@qq.com>
Date: Mon, 8 Apr 2024 00:14:57 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A1=B5=E9=9D=A2token?=
 =?UTF-8?q?=E5=AD=98=E5=85=A5vuex?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json            | 14 +++++++-
 package.json                 |  3 +-
 src/main.js                  |  2 ++
 src/store/index.js           | 65 ++++++++++++++++++++++++++++++++++++
 src/views/AuthPage/Login.vue | 24 +++++++++++--
 5 files changed, 103 insertions(+), 5 deletions(-)
 create mode 100644 src/store/index.js

diff --git a/package-lock.json b/package-lock.json
index 8fb97b4..2d5c054 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 13f7f48..04c0cdf 100644
--- a/package.json
+++ b/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",
diff --git a/src/main.js b/src/main.js
index 725f249..4e7ea5b 100644
--- a/src/main.js
+++ b/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')
 
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..6b586db
--- /dev/null
+++ b/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;
diff --git a/src/views/AuthPage/Login.vue b/src/views/AuthPage/Login.vue
index eb08f46..417ea26 100644
--- a/src/views/AuthPage/Login.vue
+++ b/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>
 * {