feat 添加pinia

admin-fe/README.MD

@@ -179,3 +179,6 @@ app.use(router); // 在应用使用router
 > 跨域除了上述原则之外，自定义请求头也会使跨域失败
 
 #### 请求接口
+
+
+### 数据状态 - **pinia**

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')

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}
+})

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;
 }

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
         }
     }
 }

admin-fe/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "include": [
     "src/**/*.d.ts",
+    "src/**/*.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
     "vite.config.ts"