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的拆分，方便以后好维护。

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

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

更新数据时redis缓存与数据库数据不一致的问题
最初级的缓存不一致问题及解决方案问题:先修改数据库,再删除缓存.如果删除缓存失败了,那么会导致数据库中是新数据,缓存中是旧数据,数据就出现了不一致. 解决思路:先删除缓存,再修改数据库.如果数据库修 ...
25 Redis的缓存中的数据和数据库中的不一致问题
25 Redis的缓存中的数据和数据库中的不一致问题前言一.缓存和数据库的数据不一致是如何发生的? 二.解决Redis 和数据库数据不一致的方法总结前言 Redis 缓存经常会遇到有 4 个方 ...
翻译君Mobx,Ten minute introduction to MobX and React
简要介绍:最近看了一下Mobx,然后有一篇入门教程是英文的,这里翻译一下并写写自己的心得体会. 原文地址:https://mobx.js.org/getting-started.html 一.Mobx ...
我在React Native中构建时获得的经验教训
by Amanda Bullington 通过阿曼达·布林顿(Amanda Bullington) 我在React Native中构建时获得的经验教训 (Lessons I learned while ...
[react] 在React中声明组件时组件名的第一个字母必须是大写吗？为什么？
[react] 在React中声明组件时组件名的第一个字母必须是大写吗?为什么? 必须,React根据首字母是否大写来区分react组件还是dom元素个人简介我是歌谣,欢迎和大家一起交流前后端知识 ...
Redis：缓存问题之数据不一致（更新数据库时主动更新）
Redis:缓存问题之数据不一致(更新数据库时主动更新) 关键词数据源不一样(缓存和db操作非原子性) 1.延时双删 -> 2.TTL -> 3.缓存删除失败记录到日志中,利用脚本提取 ...
场景切换时清理缓存！！CCTextureCache、CCSpriteFrameCache、CCAnimationCache
cocos2d-x中存在3个缓存类,都是全局单例模式. 1.CCTextureCache 首先是最底层也最有效的纹理缓存CCTextureCache,这里缓存的是加载到内存中的纹理资源,也就是图片资源 ...
Taro3.2 适配 React Native 之运行时架构详解
导读由 58 前端团队主导的 Taro 3 适配 React Native 工作已完成有一段时间了.目前发布了多个体验版,也将在3月底迎来正式版.基于 Taro 的良好架构演变,适配 React N ...
Can not perform this action after onSaveInstanceState和重建Activity时恢复缓存的Fragmen的问题
Fragment 在显示或者隐藏,移除是出现Can not perform this action after onSaveInstanceState #解决办法:onSaveInstanceSta ...

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

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

问题

思路

代码

写在最后

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

最新文章

热门文章