首页
学习
活动
专区
工具
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.5K20

关于如何在 Mobx 中组织 Stores

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

93500
  • 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.7K30

    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值有什么作用?

    48610

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

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

    83610

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

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

    89960

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

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

    1.9K20

    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

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

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

    2.3K20

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

    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 分包的好处 可以优化小程序首次启动的下载时间 在多团队共同开发时可以更好的解耦协作

    24710

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

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

    1.6K30

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

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

    1.5K40

    H5 页面列表缓存方案

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

    1.6K20
    领券