react与mobx搭配时如何缓存mobx的数据（刷新之后保存状态）

问题

近日在使用react的过程中，在状态管理方面，我使用了mobx，但是发现它与vuex有一个一样的问题，在强制刷新之后会使我保存的状态丢失，于是我打算仿照我处理vuex的方法，写一个类似的功能，话不多说，进入正题。

思路

我打算这样处理：把状态缓存在session里。
步骤一：在页面一进入的时候判断session内是否有我缓存的状态，有，那么就把缓存中的数据赋值给我的状态，没有，就不做任何操作
步骤二：在页面刷新或者退出的时候，把数据缓存到session内，beforeunload事件。
下面直接上代码

代码

    @action getDataFromSessionStorage = () => {
        sessionStorage.getItem("testStore2Obj")?
            this.testStore2Obj = JSON.parse(sessionStorage.getItem("testStore2Obj")):"";
    };

    @action setDataFromSessionStorage = () => {
        sessionStorage.setItem("testStore2Obj",JSON.stringify(this.testStore2Obj));
    };

把如上两个方法加在你的store文件内
如图所示（注意“testStore2Obj”这个变量是我自定义的，详情请注意看图）：

然后在你的App.js内加入这段代码（“testStore2”注意这个变量，这个变量是你的store的文件名）

    componentWillMount(){
        //获取mobx的数据
            this.props.testStore2.getDataFromSessionStorage();
    }
    componentDidMount() {
        //在页面刷新时将mobx里的信息保存到sessionStorage里
        window.addEventListener("beforeunload",()=>{
                this.props.testStore2.setDataFromSessionStorage();
        })
    }

然后就可以解决刷新之后状态丢失的问题啦~

写在最后

有同学可能会问为什么我的图中会是

	export default testStore2

而不是

	export default new testStore2()

这是因为我做了store的拆分，方便以后好维护。

好啦，就写到这里啦~希望这篇文档能给您带来帮助，感谢阅读。