From 48c34eb551760c5f15667fc54ebc5da36a5eb4d7 Mon Sep 17 00:00:00 2001
From: callmeyan <yaclty2@gmail.com>
Date: Mon, 5 Dec 2022 17:30:56 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E6=B7=BB=E5=8A=A0pinia?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin-fe/README.MD              |  3 +++
 admin-fe/src/main.ts            |  3 +++
 admin-fe/src/service/store.ts   | 47 +++++++++++++++++++++++++++++++++
 admin-fe/src/service/types.d.ts |  6 +++--
 admin-fe/src/views/Login.vue    | 23 +++++++++-------
 admin-fe/tsconfig.json          |  1 +
 6 files changed, 71 insertions(+), 12 deletions(-)
 create mode 100644 admin-fe/src/service/store.ts

diff --git a/admin-fe/README.MD b/admin-fe/README.MD
index 8c5dcfc..e8b58d8 100644
--- a/admin-fe/README.MD
+++ b/admin-fe/README.MD
@@ -179,3 +179,6 @@ app.use(router); // 在应用使用router
 > 跨域除了上述原则之外，自定义请求头也会使跨域失败
 
 #### 请求接口
+
+
+### 数据状态 - **pinia**
diff --git a/admin-fe/src/main.ts b/admin-fe/src/main.ts
index 852b43e..acb4752 100644
--- a/admin-fe/src/main.ts
+++ b/admin-fe/src/main.ts
@@ -1,4 +1,6 @@
 import {createApp} from 'vue';
+import {createPinia} from 'pinia'
+
 import App from './App.vue'
 import router from './router'
 import {httpConfig} from "./util/http";
@@ -9,4 +11,5 @@ httpConfig.baseURL = "http://localhost:8080"
 const app = createApp(App)
 // 使用路由
 app.use(router)
+app.use(createPinia());
 app.mount('#vue-root-app')
\ No newline at end of file
diff --git a/admin-fe/src/service/store.ts b/admin-fe/src/service/store.ts
new file mode 100644
index 0000000..2d2947c
--- /dev/null
+++ b/admin-fe/src/service/store.ts
@@ -0,0 +1,47 @@
+import {defineStore} from "pinia";
+import {ref} from "vue";
+import http from "../util/http";
+import message from "../components/message";
+import {useRouter} from "vue-router";
+
+// store的id必须唯一
+export const useTestStore = defineStore('test-store', {
+    state: () => ({
+        info: {
+            nickname: ''
+        }
+    }),
+    getters: {
+        nickname: (state) => state.info.nickname
+    },
+    actions: {}
+})
+
+export const useUserStore = defineStore('user-store', () => {
+    const userinfo = ref<AdminLoginModel>()
+
+    const updateInfo = async () => {
+        const data = await http.get<AdminLoginModel>('/admin/user/info')
+        userinfo.value = data
+    }
+
+    async function login(params: any) {
+        try {
+            const data = await http.post<AdminLoginModel>('/admin/user/login', params)
+            userinfo.value = data
+            localStorage.setItem("user-login-token", data.token)
+        } catch (e) {
+            message.toast('登录失败:' + e.message)
+            throw e;
+        }
+    }
+
+    async function logout() {
+        const data = await http.get<AdminLoginModel>('/admin/user/info')
+        localStorage.removeItem('user-login-token')
+        userinfo.value = null
+
+    }
+
+    return {userinfo, login, logout}
+})
\ No newline at end of file
diff --git a/admin-fe/src/service/types.d.ts b/admin-fe/src/service/types.d.ts
index 6fde9b3..8328c9b 100644
--- a/admin-fe/src/service/types.d.ts
+++ b/admin-fe/src/service/types.d.ts
@@ -1,4 +1,6 @@
 type AdminLoginModel = {
-    account: string
-    token: string
+    id: number;
+    account: string;
+    password?: string;
+    token: string;
 }
\ No newline at end of file
diff --git a/admin-fe/src/views/Login.vue b/admin-fe/src/views/Login.vue
index b88b34c..8086d41 100644
--- a/admin-fe/src/views/Login.vue
+++ b/admin-fe/src/views/Login.vue
@@ -6,10 +6,8 @@
             </p>
             <p>
                 <input placeholder="请输入密码" type="text" v-model="data.password">
-                {{ data.password }}
             </p>
-            <div class="error">{{ err }}</div>
-            <button  :disabled="loading" :type="loading?'button':'submit'">{{loading?'正在登录':'登录'}}</button>
+            <button :disabled="loading" :type="loading?'button':'submit'">{{ loading ? '正在登录' : '登录' }}</button>
         </form>
     </div>
 </template>
@@ -17,6 +15,8 @@
 <script lang="ts">
 import {reactive, ref} from "vue";
 import http from "../util/http";
+import {useUserStore} from "../service/store";
+import {useRouter} from "vue-router";
 
 export default {
     name: "User",
@@ -28,24 +28,27 @@ export default {
             account: '',
             password: ''
         })
+        const store = useUserStore()
+        const r = useRouter()
+
         const loading = ref(false)
-        const err = ref()
 
         function onLogin(e: Event) {
             e.preventDefault()
             loading.value = true
-            http.post<AdminLoginModel>('/admin/user/login', data).then(result => {
-                console.log(result)
-            }).catch(e => {
-                err.value = e.message
+            store.login(data)
+                .then(()=>{
+                    r.replace('/home').then(()=>console.log('success')).catch(e=>console.log(e))
+                })
+                .catch(e => {
                 console.log(e)
-            }).finally(()=>{
+            }).finally(() => {
                 loading.value = false
             })
         }
 
         return {
-            data, onLogin, err,loading
+            data, onLogin, loading
         }
     }
 }
diff --git a/admin-fe/tsconfig.json b/admin-fe/tsconfig.json
index 49b2fd6..67a9372 100644
--- a/admin-fe/tsconfig.json
+++ b/admin-fe/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "include": [
     "src/**/*.d.ts",
+    "src/**/*.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
     "vite.config.ts"