feat: 登录页面框架

src/store/index.ts

@@ -0,0 +1,6 @@
+import { useUserStore } from './modules/user.ts'
+
+/** 将每个Store实例化 */
+export const RootStore = {
+    user: new useUserStore(),
+}

src/store/modules/user.ts

@@ -0,0 +1,40 @@
+import { action, makeAutoObservable } from 'mobx'
+import { makePersistable, isHydrated } from 'mobx-persist-store'
+
+export class useUserStore {
+    user: object = {}
+    constructor() {
+        makeAutoObservable(
+            this,
+            {
+                setUserInfo: action,
+            },
+            { autoBind: true },
+        )
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        makePersistable(this, {
+            // 在构造函数内使用 makePersistable
+            name: 'userStore', // 保存的name，用于在storage中的名称标识，只要不和storage中其他名称重复就可以
+            properties: ['user'], // 要保存的字段，这些字段会被保存在name对应的storage中，注意：不写在这里面的字段将不会被保存，刷新页面也将丢失：get字段例外。get数据会在数据返回后再自动计算
+            storage: window.localStorage, // 保存的位置：看自己的业务情况选择，可以是localStorage，sessionstorage
+            // 。。还有一些其他配置参数，例如数据过期时间等等，可以康康文档，像storage这种字段可以配置在全局配置里，详见文档
+        }).then(
+            action((persistStore) => {
+                // persist 完成的回调，在这里可以执行一些拿到数据后需要执行的操作，如果在页面上要判断是否完成persist，使用 isHydrated
+                // console.log(persistStore)
+            }),
+        )
+    }
+    get getUserInfo() {
+        return this.user
+    }
+    get token() {
+        return this.user ? this.user.token : ''
+    }
+    get isHydrated() {
+        return isHydrated(this)
+    }
+    setUserInfo(user: object) {
+        this.user = user
+    }
+}