首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何防止我的mobx存储在切换路由时重置?

要防止mobx存储在切换路由时重置,可以采取以下几种方法:

  1. 使用mobx-persist插件:mobx-persist是一个用于持久化mobx状态的插件,可以将mobx状态存储在本地存储中,如localStorage或AsyncStorage。在切换路由时,可以通过加载本地存储中的数据来恢复mobx状态,从而避免重置。
  2. 使用React Router的PersistGate组件:如果你使用React Router来管理路由,可以使用PersistGate组件来包裹你的应用程序根组件。PersistGate会在切换路由时暂时阻止渲染,直到mobx状态被加载和恢复为止。
  3. 使用React Navigation的Redux Integration:如果你使用React Navigation来管理路由,可以结合使用Redux和React Navigation的Redux Integration来存储和恢复mobx状态。通过将mobx状态存储在Redux中,可以在切换路由时保持状态的持久性。
  4. 手动管理mobx状态:如果你不想使用插件或集成库,也可以手动管理mobx状态。在切换路由时,可以将mobx状态存储在一个全局变量或缓存中,然后在切换回原始路由时重新加载状态。

总结起来,防止mobx存储在切换路由时重置的方法包括使用mobx-persist插件、React Router的PersistGate组件、React Navigation的Redux Integration,以及手动管理mobx状态。具体选择哪种方法取决于你的项目需求和技术栈。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何做到:不切换 Git 分支,同时多个分支上工作

main 分支上跑长时间测试,切换到 hotfix 或 feature, 测试就会中断 项目非常大,频繁切换索引,成本非常高 有几年前 release 旧版本,设置和当前不一样,IDE restructure...适配切换也会带来很大开销 切换分支,需要重新设置相应环境变量,比如 dev/qa/prod 需要切换到同事代码,帮助调试代码复现问题 有的同学想到,git clone 多个 repo 不就可以了吗...checkout git history/log 是重复,当项目历史非常长,.git 文件夹下内容是非常占用磁盘空间 同一个项目,多个 repo,不易管理 那如何做才能满足这些特殊场景,又不出现这些上述这些问题呢...,hotfix 目录下存放所有 hotfix worktree,这样整个磁盘目录结构不至于因为创建多个 worktree 而变得混乱 磁盘管理上有些强迫症,理想情况下,某个 repo worktree...那么如何解决呢?点击下方卡片,关注“日拱一兵”,正在连载Git高级技巧! 灵魂追问 可以删除 main worktree 吗?

1.4K20

关于如何Mobx 中组织 Stores

Stores(存储) Store 可以在任何 Flux 系架构中找到,可以与 MVC 模式中控制器进行比较。...observable 装饰,以及数据操作方式等等,对 Mobx 耦合较深,日后切换框架或重构成本很高 状态可以被随意修改,通过configure({ enforceActions: 'always'...,例如所有需要响应数据变动组件都需要使用 observer 装饰,组件本地状态也需要 observable 装饰,以及数据操作方式等等,对 Mobx 耦合较深, 日后切换框架或重构成本很高 无数据快照...两个页面,都要修改 C 页面,那么, A 和 B 页面修改 C Store,很方便,但是,如果不制定一套规范,如果数据改变,要追踪来源,很困难,而且很容易产生意想不到情况。...通过configure({ enforceActions: 'always' });杜绝 Action 以外对 Store 修改 博客 欢迎关注博客

88700
  • Vite + React + Typescript 构建实战

    编辑器中,Mac 快捷键 command+, 来快速打开配置项,切换到 workspace 模块,并点击右上角 open settings json 按钮,配置如下信息: {  "editor.formatOnSave...2、.eslintrc:ESLint 编码规则配置,这里推荐使用业界统一标准,这里推荐 AlloyTeam eslint-config-alloy,按照文档安装对应 ESLint 配置: npm...mobx 时候,版本已经是 mobx@6.x,发现这里相比于旧版本,API 使用上有了一些差异,特地在这里分享下踩坑经历 Store 划分 store 划分,主要参考本文示例 需要注意是,...code demo↑ 以上就是整个 mobx+typescript 函数式组件中实际应用场景了;如果有什么问题,欢迎评论交流 :) 参考资料 React Hook useContext (https...END ▼ 更多精彩推荐,请关注我们 ▼ 你每个赞和在看,都喜欢! ?

    1.6K30

    2020 年你应该知道 React 库

    当我从 Angular 切换到 React,绝对经历了它作为 React 优势。 只有通过 React,您才能使用函数组件和 props 构建组件驱动用户界面。...: React Hooks or Redux/MobX/Mobx State Tree 使用 React 路由 路由 React 中起着重要作用。...您引入路由以前,您可以先尝试 React 条件渲染,它虽然不是路由合理替代,但是小型应用中以及足够用了。...当使用这样类型检查器,您可以开发期间获得错误。您不必启动应用程序就可以找到本可以通过这种类型检查防止 bug。这样一来,类型检查器就可以提高您开发人员体验,避免首先引入 bug。...建议: ESLint Prettier React 认证 较大 React 应用程序中,您可能希望引入具有注册、登录和退出功能身份验证。此外,密码重置和密码更改功能往往是需要

    14.4K40

    【春节日更】最新react面试题汇总

    汇总了最近关于React面试题: react面试题汇总(2020) 分享给大家,主要提供题目,答案自行百度,有不清楚,也可以私信我,再专门针对这个题目回答 注:有些题目类同...虚拟dom原理 diff算法解释 哈希路由实现原理? history路由实现原理? 高阶组件实现原理? 高阶组件使用修饰器原理? mobx&redux: 为什么要用mobx?...mobx如何使用 react redux是如何工作 熟悉redux吗,讲解一下它是干什么 Hook: 解释hook,什么情况使用 hook好处是什么? 使用过HOOK里面的哪些函数?怎么使用?...setState工作原理,是同步还是异步,如何同步获取state class继承用Component,了解PureComponent吗 操作: react路由两种模式详细说明,怎么监听路由变化 react...三级动态路由实现代码? 登录和权限具体怎么做? react列表渲染key有什么用,不用key影响,,key使用循环列表产生index可以吗 react中生成列表key值有什么作用?

    47910

    基于flux和observer相结合思想数据管理器

    store中存储了state,一个固定state对应一个固定界面,当store中state发生改变,界面也应该随之改变。...MobX也是管理状态,但是并不存在一个固定store,它不需要store来存储所有的状态信息,你需要一个store,立即通过一个observable方法封装一个js对象,就得到一个可被监控state...一个数据管理器核心需求 但是,我们要讨论,是如何来管理我们数据,而非状态,相信上面两种思想已经是解决状态问题最好方案了。...应用只需要非常简单方法就可以从这里得到它想要数据,当然,如果这里确实还没有这个数据,只能返回undefined,但是这个时候可以马上去取,以防止你下次来取还没有。...为了防止用户直接操作修改通过get得到数据,我们get输出数据,进行了一次深拷贝,这样对于应用而言,它即使强制修改了数据,也不能影响其它应用,因为从代码层面,实际上它们使用根本不是同一个js对象

    82110

    基于flux和observer相结合思想数据管理器

    store中存储了state,一个固定state对应一个固定界面,当store中state发生改变,界面也应该随之改变。...MobX也是管理状态,但是并不存在一个固定store,它不需要store来存储所有的状态信息,你需要一个store,立即通过一个observable方法封装一个js对象,就得到一个可被监控state...一个数据管理器核心需求 但是,我们要讨论,是如何来管理我们数据,而非状态,相信上面两种思想已经是解决状态问题最好方案了。...应用只需要非常简单方法就可以从这里得到它想要数据,当然,如果这里确实还没有这个数据,只能返回undefined,但是这个时候可以马上去取,以防止你下次来取还没有。...为了防止用户直接操作修改通过get得到数据,我们get输出数据,进行了一次深拷贝,这样对于应用而言,它即使强制修改了数据,也不能影响其它应用,因为从代码层面,实际上它们使用根本不是同一个js对象

    87460

    「React缓存页面」从需求到开源(是怎么样让产品小姐姐刮目相看

    如上图所示,当我们编辑内容时候,一些数据可能从其他页面获得,所以要求,无论切换路由切换页面,当前页面的编辑信息均不能被置空,只有点击确定 ,重置,表单才内容置空。...1 解决方案 1 数据状态缓存到公共管理可行性 这个需求首先让想到是用redux或者是mobx来把页面的状态缓存起来,然后切换页面的时候,把这些数据缓存进去,再次切换回来时候,将数据取出来,这样就一个问题...因为设计之初,就想着将用不同状态管理keepalive状态,这样好处是,后续可以给缓存路由组件,增加一些额外声明周期,比如说vue中 activated 和 deactivated一样。...这就是react基础库 16.8+原因之一。另外一个原因就是hooks中有useMemo这样防止渲染穿透api,有助于调节路由组件更新次数。...切换页面:切换页面的时候,路由组件是肯定卸载,这时候需要将我们dom还给容器组件,然后容器组件进入冻结状态。

    1.8K20

    React 折腾记 - (3) 结合Mobx实现一个比较靠谱动态tab水平菜单,同时关联侧边栏

    ---- 基础环境 mobx & mobx-react react-router-dom v4 styled-components react 16.4.x antd 3.8.x 为了保持后台风格一致化...,直接基于antd基础上封装一下 实现思路基本是一样(哪怕是自己把组件都写了) ---- 实现思路 思路 用mobx来维护打开菜单数据,数据用数组来维护 考虑追加,移除过程去重 数据及行为设计...结合路由进行响应 目标 点击tab展示页面内容,同时关联侧边栏菜单 tab自身可以关闭,注意规避只有一个时候不显示关闭按钮,高亮 杜绝重复点击tab时候(tab和路由匹配情况),再次渲染组件...以及访问url 追加action,删除action 只读历史集合,只读的当前路由对象集合 思路有了.剩下就是东西出炉了,先构建model,其实就是mobx数据结构 import { observable...因为感觉意义不大,水平菜单宽度不管是pad上还是pc上, 默认一行最起码可以打开五个tab, 一般人注意力都集中几个常见页面上 假如你需要更多呢?

    3.2K20

    TS+React+Router+Mobx+Koa打造全栈应用

    Route中额外包裹了一层,判断一个当前状态store.userInfo.logged,这里是存储用户状态。...如果登录了则渲染路由包裹后组件否则重定向到登陆页面。这里路由跳转逻辑和组件耦合起来了。相比较vue-router,vue则提供了导航钩子,能够每个路由跳转时候判断有无登录权限。...react-router中,路由有hashrouter和historyrouter两种(只讨论web相关,还有额外native和memory路由)。...使用mobx时候不太能确定哪些地方重新进行了渲染,准确不知道应该在哪些地方添加@observer修饰。不太喜欢这种不能掌握变化感觉,当然也可能是对virtualDOM了解不够。...我们知道使用事件委托要比每一个元素上都绑定了事件监听器要好很多,vue中,我们给v-for渲染出来组件绑定事件监听器,文档已经指出帮我们做了关于委托优化。

    1.8K70

    「前端架构」Redux vs.MobX权威指南

    个人喜欢将应用程序整个状态存储单个存储想法。这有助于我把同一个地方称为真理唯一来源。有些人可能会说多家商店对他们更有效,更喜欢MobX。...数据结构 Redux Redux使用普通JavaScript对象作为数据结构来存储状态。使用Redux,必须手动跟踪更新。需要维护大量状态应用程序中,这可能更困难。...如果您有兴趣了解更多关于纯函数以及它们Redux中如何操作信息,您可以阅读本文以获得更好理解。这是Redux最好特性之一。...获奖者:Redux 由于Redux存储是纯,因此更容易预测,并且很容易恢复状态更新。MobX情况下,如果操作不当,状态更新可能会使调试更加困难。...纯函数更容易测试,因为它们是可预测和简单。这就产生了可伸缩可维护代码。这是选择Redux而不是MobX核心优势之一。 获奖者:Redux 结论 好吧,判决结果如何

    1.6K30

    微信小程序-零基础入门手册

    9.5 onLoad 中接受导航传参 一般会通过 this.setData() 把带过来 参数 存储到 data 中 10、页面事件 10.1 下拉刷新事件 10.1.1...关闭下拉刷新动作函数 一旦触发下拉刷新事件,先重置关键数据,重新发起请求,并传递一个 关闭下拉动作函数 getshopList 函数中 complete 函数中判断 是否存在 cb 函数,存在就执行...全局引用 13.1.3 组件和页面的区别 13.2 组件样式 13.2.1 组件样式隔离 13.2.2 组件样式隔离注意点 这里是一个例子,组件中突兀使用了...安装MobX相关包:npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1 15.1 创建 MobX...分包指的是把一个完整小程序项目,按照需求划分为不同子包,构建打包成不同分包,用户使用时按需进行加载 16.1.1.2 分包好处 可以优化小程序首次启动下载时间 多团队共同开发可以更好解耦协作

    16510

    腾讯前端二面常考react面试题总结

    React中,组件负责控制和管理自己状态。 如果将HTML中表单元素( input、 select、 textarea等)添加到组件中,当用户与表单发生交互,就涉及表单数据存储问题。...如下所示, username没有存储DOM元素内,而是存储组件状态中。每次要更新 username,就要调用 setState更新状态;每次要获取 username值,就要获取组件状态值。...表单如何呈现由表单元素自身决定。 如下所示,表单值并没有存储组件状态中,而是存储表单元素中,当要修改表单数据,直接输入表单即可。有时也可以获取元素,再手动修改它值。...它提供了一系列React组件,包括数字格式化、字符串格式化、日期格式化等。 React-intl中,可以配置不同语言包,他工作原理就是根据需要,语言包之间进行切换。...那需要做只是: 当路由改变,根据路由,也去请求数据: class NewsList extends Component { componentDidMount () { this.fetchData

    1.5K40

    React组件设计实践总结04 - 组件思维

    觉得可以认为组件就是一种特殊 hook, 只不过它输出 Virtual DOM. 一些注意事项: 只能在组件顶层调用 hooks。...对 mobx 耦合较深, 日后切换框架或重构成本很高 兼容性. mobx v5 后使用 Proxy 进行重构, Proxy Chrome49 之后才支持....传统路由主要用于区分页面, 所以一开始前端路由设计也像后端路由(也称为静态路由)一样, 使用对象配置方式, 给不同 url 分配不同页面组件, 当应用启动, 路由配置表中查找匹配 URL 组件并渲染出来...React-Router v4 算是一个真正意义上符合组件化思维路由库, React-Router 官方称之为‘动态路由’, 官方解释是”指的是应用程序渲染发生路由,而不是在运行应用程序之外配置或约定中发生路由...这种方式更加灵活, 所以选择 v4 不代表放弃旧路由方式, 你完全可以按照旧方式来实现页面路由.

    2.3K20

    H5 页面列表缓存方案

    当我们切换路由,没有被匹配到 Component 也会被整体替换掉,原有的状态也丢失了。...路由切换自动保存状态。2. 手动保存状态。...所以只能是路由层做手脚,路由切换做对应缓存操作,之前有开发者提出了一种方案:通过样式来控制组件显示/隐藏 (https://github.com/facebook/react/issues/12039...),但是这可能会有问题,例如切换组件时候无法使用动画,或者使用 Redux、Mobx 这样数据流管理工具,还有开发者通过 React.createPortal API 实现了 React 版本 React...第二种解决方案就是手动保存状态,即在页面卸载手动将页面的状态收集存储起来,页面挂载时候进行数据恢复,个人采用就是简单粗暴后者,实现上比较简单。

    1.5K20
    领券