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