react中使用mobx状态管理如何对数据进行持久化配置

       状态管理在开发中经常用到，但是使用像vueX pinia mobx等这种库的时候都是默认没有持久化配置的，也就是说，退出页面后之前的数据就会丢失，但是有些数据是需要保存一段时间的，比如token，用户基本信息啥的。所以数据持久化就有必要。当然其实也可以将一些数据存储到local storage或者cookie的，自己其实也可以封装一些方法让状态管理的数据保存到本地的，但是耗时耗力而且还没有第三方库好用。

       在pinia中对数据进行持久化可以使用pinia-plugin-persistedstate ，在mobx可以使用mobx-persist-store 对数据进行持久化。下面是一些简单的使用。

• 安装mobx-persist-store库

bun add mobx-persist-store

• 在代码中使用

import React from 'react'
import {makeAutoObservable} from 'mobx'
import {makePersistable} from 'mobx-persist-store'

class UserStore {

    username = 'name'

    constructor() {
        makeAutoObservable(this)
        makePersistable(this, {
            name: 'UserStore',
            properties: ['username'],
            storage: window.localStorage,
        }).then(r => {
            console.log(r)
        })
    }

    setName(name: string) {
        this.username = name
    }
}

const userStoresContext = React.createContext({
    userStore: new UserStore(),
})

const useUserStore = () => React.useContext(userStoresContext)


export {
    useUserStore,
}

使用mobx-persist-store中的makePersistable方法：

       name: 名称，唯一值，类似于pinia-plugin-persistedstate 中的id

       properties: 数组，表示需要持久化的值，类似于pinia-plugin-persistedstate中的path

       storage: 使用什么存储（localStorage, 或者sessionStorag）和pinia-plugin-persistedstate 一样