46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
/** @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;
|
||
}
|
||
}
|