2020/03/18 04-Mobx使用和localstore持久化技术

最新推荐文章于 2024-04-29 21:09:02 发布
最新推荐文章于 2024-04-29 21:09:02 发布
阅读量1.8k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42227818/article/details/104953232
版权

同步异步理解怎么互相调用，以及调用之后产生什么效果，同步异步都是要结果，只不过异步拿到一个中间结果，但是这个结果要不要随你，目的就是用户名密码提交了，验证完后灯结果到底成功不成功告诉他。
在service里实现了一个login ，在login里做了各种处理。
同步函数就相当于在这里卡着了，这个时候就需要用到异步，现在的主要实现方式是promise，其他异步方案（setinterval，settimeout传参是个问题，所以用promise，因为promise就跟同步效果不一样了，一旦调用promise就立马返回）handleclick函数里就不用等了，什么时候刷新就需要等回调（用了封装类似promise的东西，axios，这个东西回发一个ajax请求，这个请求什么时候回来不知道，我们在里面等then，或者catch等正确还是错误的结果回来，一旦回来相当于成功回调，失败会有失败回调）
成功回调来了做处理，假如结果要在组件中呈现出来，需要刷一下render函数，react提供了两种方法刷新render函数，一种props，一种要么触发state变化，state变化用 setState，控制state变化来引起生命周期中render函数的变化。
这个操作流程还需要传一个object，才能进行setState非常麻烦，效率不高，整个过程就在处理props，和state，都在处理状态值特别麻烦。
因此社区提供了很多处理状态的库，其中最好的是redux（学习难度很大），mobx很小巧，中小型项目非常适合，用起来比较简单，mobox和react结合起来就是强强结合
在这里插入图片描述
在这里插入图片描述
加不加–save都是到运行时依赖的，要操作react，就要安装这两个
在这里插入图片描述
在这里插入图片描述

还有react也安装一下
在这里插入图片描述
看一下package里，mobox和mobox-react都有

在这里插入图片描述
直接把整个目录删除，重新安装下，yarn速度比他快多了，yarn还能解决依赖问题
在这里插入图片描述
在这里插入图片描述
应该保留这些
在这里插入图片描述
这两个直接放在里面

在这里插入图片描述
把源码打包的时候，把这个目录删除，其余打包发给别人即可，别人拿到这个直接npm install即可在这里插入图片描述
我们需要用这个
在这里插入图片描述

在这里插入图片描述
一个叫可观察的，一个叫观察者在这里插入图片描述
实现了开发中的观察者模式
在这里插入图片描述
观察者模式指的是，也叫订阅模式，订阅它，当它发生变化后会通知观察者，发生了变化，会通知在它内部注册好的观察者，这个模式负担小
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
现在把这种异步调用变成一种mbox，mbox实现的一种通知机制，观察者模式，首先需要告诉他观察什么，然后再解决观察者的问题
在这里插入图片描述
还是在user中，用装饰器observable自动进来，现在这个是一个被观察对象
在这里插入图片描述
一般把观察者放到这里，它是mbox和react直接要通信的东西，因为观察者是react组件，所以用mobx-react，现在就解决了观察者和被观察者的问题，我们组件关心谁就是
在这里插入图片描述
关注这个数据的变化,这个数据变化了，就会在那边收到信息，是一种订阅模式
在这里插入图片描述
这边数据来了然后再变化，这里数据来了都是成功的，成功就是200系列
在这里插入图片描述
发个请求可以回来

在这里插入图片描述
这个data里现在有两个值，token，user

在这里插入图片描述
response里有个data，里面有我们需要的东西，里面有token，user两个变量，这里用下解构
在这里插入图片描述
再发一次，解开了，解构成功

在这里插入图片描述

如何才知道成功了，成功应该引起一些变化，不然 通知干什么，好了通知后要引起重绘，打印看看是否会调用render重绘
在这里插入图片描述
假如现在登录成功，loggedin=true
在这里插入图片描述出错了，不能设置loggedin属性

在这里插入图片描述
说是这里不能设置，this是undefined
在这里插入图片描述
这是新类的定义

在这里插入图片描述
不能用这样的函数
在这里插入图片描述
新类的定义用新办法，改成箭头函数，打印一下this就行，按照道理this里可以加loggedin，出问题是undefined，出问题就要看谁是undefined
在这里插入图片描述
这是新类的定义
在这里插入图片描述
新类的定义用新办法上箭头函数
在这里插入图片描述
新的类，class里多用箭头函数就没错

没看到引起重绘

在这里插入图片描述
**state改变一定会引起重绘，前提是不拦住它，在于这里没有用它。
**
在这里插入图片描述
这个就是service的一个属性
在这里插入图片描述
现在通过service访问看看，然后调用loggedin这样一个属性
在这里插入图片描述
原来是false现在是true

在这里插入图片描述
如果虽然申明成了一个观察者，要去观察被观察对象，但是在render中，至少要用一下，哪怕只是打印一下，也需要用一下，不用根本就不触发，用了就会动态绑定这些东西，然后关联起来，一旦改变就会通知观察者，这边就会有动作
在这里插入图片描述
在这样效率高，连state都不要了，这样就是说关注谁，谁就可以变。
它的意思是大家 都可以是观察者，你可能观察整个，它观察其他的，只要观察的变量发生变化，这边就可以引起动作
在这里插入图片描述
这边都是观察者，就要看你观察谁，谁变了，你就有影响，虽然叫观察者，但是不观察它，变了也不会通知你
在这里插入图片描述
失败也需要通知，失败就为false
在这里插入图片描述
这一句不会改变dom
在这里插入图片描述

学react之后在学vue，问题不大，写法都差不多，用的都是新语法

现在看到true这个值了，现在想要让它跳转
在这里插入图片描述
在这里插入图片描述
跳另外一个地址就是路由的问题，就是前端路由的事情，这边就告诉你怎么跳转redirects，重定向
在这里插入图片描述
跳使用redirect

在这里插入图片描述
简单点，抄这一句话即可

在这里插入图片描述
这一句就类似

在这里插入图片描述
两条return，假设登录成功状态就记住了
在这里插入图片描述假设登录成功状态就记住了，loggedin就是true，直接return这样一个顶级标签
在这里插入图片描述
是false就把下面的return回去，如果没有登录就显示登录组件
在这里插入图片描述
是在路由里的，跟操作DOM树有关，返回还是在JSX语法里，根操作dom树有关
在这里插入图片描述

现在没有登录后的页面，就先跳转到首页上
在这里插入图片描述
点击登录

在这里插入图片描述
**再次点击登录就没用了，实现了登录了以后就不用再登录了，用mbox来写，是比较简单的（虽然用promise的setState方式也可以模拟出来，甚至可以写ajax调用回调也是异步的，但是这种操作都是比较麻烦的，社区就提供了redux和mobx两种控件。
两种组件用哪个都行，redux太难了，mbox就比较简单 **
在这里插入图片描述
这里有一个小问题，token给扔回来了，cookie是一种持久化的方案，用cookie持久化的数据，下回在请求的时候会随着请求带回去cookie，只要cookie不过期，它都在，只要访问这个域名的话，就会把这个cookie带上发到服务端去，其中还有浏览器没有的cookie值，sessionid，这个cookie值是sessionid，都是带回到服务器端去的。
放在cookie没问题，但是我们要自己弄一个header

另一种持久化策略，在浏览器端可以保存数据可以用cookie，但是绝对不用header，header请求完了就没了，cookie只要不过期可以长久保存，不推荐写永久cookie，cookie还是要设计一个合理的过期时间的。
在这里插入图片描述
html5之后提供了很多持久化方案，这里有一个application
在这里插入图片描述
这里有几种持久化方案，每个浏览器支持的都不一样
在这里插入图片描述
有人写好了，会调用浏览器最好的持久化方案帮我们存储下这些数据

内容其实已经有了，已经保存下来
在这里插入图片描述
有些情况是，已经写成功了，但是死活刷新看不到，把浏览器关掉再打开到loacal storage里看，可能就有了在这里插入图片描述
常见的持久化方案就是cookie，这就是本地化存储的方案，浏览器端持久化也是为了浏览器方便，也带来了风险，如果不用Jwt这种技术，谁想改都没辙
在这里插入图片描述
如何使用，cookie就塞进去就好了，在服务器 django里request.cookie就可以拿到了在这里插入图片描述
新的持久化方案到底怎么利用，首先看一个库，跨浏览器本地化的解决方案
在这里插入图片描述
安装
在这里插入图片描述
建议直接yarn，会有依赖问题

在这里插入图片描述
可能有错误，还是直接yarn装一个
在这里插入图片描述yarn安装直接启动，yarn add store
在这里插入图片描述
在这里插入图片描述
安装依赖里，store已经在里面了

在这里插入图片描述
官方说就这么用

在这里插入图片描述

这就是common js的方式，引用之后给一个名字，用这个名字.get即可，因为这种情况下，直接按F8，import语句都通过不了，所以用commonjs的方式，user设定值，get出来这个值
在这里插入图片描述
get回来返回一个对象，直接按F8
在这里插入图片描述
有一个问题，跟cookie一样是否需要过期
在这里插入图片描述
安装的store里有这样一个插件
在这里插入图片描述
点击例子

在这里插入图片描述
set这么玩，这一条就告诉我们一条数据可以坚持多久
在这里插入图片描述
这样就可以得到一个值，把一些值带进去，设定10秒过期时间
在这里插入图片描述
setInterval异步函数每一秒执行一次，取一下user值
在这里插入图片描述
在这里插入图片描述
少了个东西没写，要加这个插件，不加不支持过期，写了也是白写
在这里插入图片描述

在这里插入图片描述
get可以加默认值，F9停一下，settimeout，setinterval，测试的时候用的很多
在这里插入图片描述
拿到user里，导入下插件
在这里插入图片描述
设定下过期时间，这个单位是毫秒
在这里插入图片描述
设定token值，token的值之前已经解构出来了
在这里插入图片描述
把cookie和这里存储的都删除掉

在这里插入图片描述
写这个可能后面就看不到了

在这里插入图片描述
用一次chrome浏览器
在这里插入图片描述
cookie里还有一些其他信息，csrftoken，是以前保留的
在这里插入图片描述
点击登录

在这里插入图片描述
token写进去了
在这里插入图片描述
用这种方式就解决存储问题，下一次想要免登陆，我们可以到local storage。，提取token值，提取不到自然不能帮你登录了。提取到token值就发过去，服务端解开验证看看token过期没，然后django还要验证用户是否被禁用，才能登录
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
store.js是兼容所有浏览器的localstorage包装器，会自动选择local storage，globalstorage或者userdata来实现本地存储功能
在这里插入图片描述
用yarn就不用npm，两个会有一点兼容性问题，依赖解决方案不一样

在这里插入图片描述

remove再去访问就是undefined
get后面加个缺省值
在这里插入图片描述
拿到getuser就是一个对象

在这里插入图片描述
for each非常特殊，存储的这个两个值是反的，key在前，value在后面
在这里插入图片描述
插件需要加上

在这里插入图片描述
service代码把这段加上，推荐res这块用解构
在这里插入图片描述
再定义一个，使用each，callback给了两个值
在这里插入图片描述
这两个值使用的时候有两种方式
在这里插入图片描述
现在把value放前面去了，key在后头

在这里插入图片描述
所以这里换下位置，…args就收集到一个数组中，下面可以对这个数组里的数据进行遍历
在这里插入图片描述
现在就正过来了
在这里插入图片描述
store一个是加插件，过期的问题，还有一个就是用遍历的问题，大部分情况做字典问题，kv是反过来的，这是js这块的状态改变

mobx用的东西不多，实际上就是观察谁，被观察对象只要发生改变，观察者这边只要是引用到了，就会触发render函数的重绘，这时候会在render函数里做一些改变
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述拿到这个值就想办法跳转，redirect来解决问题
在这里插入图片描述
缺失了补上即可
在这里插入图片描述
login整个写好的代码

在这里插入图片描述
在这里利用这个进行了修改，异步的回调才修改
在这里插入图片描述
在loggin组件里要写上
在这里插入图片描述
把service注入进来，变成observer
在这里插入图片描述在里面继续写判断，如果是真就跳转，如果是假就返回登录界面

在这里插入图片描述
这样就完成了功能，这样前后端就打通了
在这里插入图片描述

48N6E
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
react中使用mobx6以及持久化存储mobx-persist-store
joeky520的博客
01-24 3875
react中使用mobx6以及持久化存储mobx-persist-store mobx6官方文档 mobx-persist-store文档 安装mobx及mobx-persist-store yarn add mobx mobx-react mobx-persist-store --save 在项目中使用mobx 在src目录下新建store文件夹，新建index.js文件 模块化开发，统一的数据仓库有利于数据管理与分发，也可以向mobx5一样在不同的模块下建state 定义类，一般以模块划分，
react+mobx强制刷新之后会使保存的状态丢失怎么解决
T3165919332的博客
01-19 517
如果你的应用使用 React Router，你可以结合 React Context 来管理一些全局状态。这些状态可以通过 Context 提供者提供，并在整个应用中共享。这样，即使页面刷新，Context 中的状态也能够被保留。这样，即使页面刷新，数据也能被恢复。使用mobx储存了我的导航但是发现我强制刷新页面，存储的状态就丢失了。这样，在刷新时，Context 中的状态仍然存在。在需要访问全局状态的组件中，使用。来获取 MobX store。在你的应用的顶层组件中，使用。
使用 MobX 实现数据持久化：最佳实践与技巧！
最新发布
笔记、经验、日常分享
04-29 567
MobX 本身不提供数据持久化功能，但是可以结合其他库或技术来实现数据持久化。可以使用localStorage 或 sessionStorage、IndexedDB、mobx-persist-store 库实现。
mobx-sync:自动持久存储Mobx存储的库
05-02
mobx同步 一个库使用JSON通过版本控制来持久化您的MobX存储。 特征 使用JSON.stringify/JSON.parse作为反序列化/序列化方法 使用@version装饰器进行版本控制 通过使用@ignore装饰器忽略任何商店节点 支持React Native 支持服务器端渲染（SSR） 安装 # by yarn yarn add mobx-sync # OR by npm npm i -S mobx-sync 快速开始 import { AsyncTrunk , date } from 'mobx-sync' ; import { observable } from 'mobx' ; class Store { @ observable foo = 'bar' ; @ date @ observable date = new Date ( ) ; }
mobx-localstorage:使用MobX的声明式React式localStorage
05-14
mobx本地存储 使用MobX的声明式React式localStorage 安装 yarn add mobx-localstorage npm i -S mobx-localstorage 特征 比本地吸气剂更高的性能 与外部变更同步 支持本机API和MobX API 用法 与本地相同，但MobX可以观察到 import { autorun } from 'mobx' ; import localStorage from 'mobx-localstorage' ; autorun ( ( ) => { console . log ( localStorage . getItem ( 'foo' ) ) ; } ) ; localStorage . setItem ( 'foo' , 'bar' ) ; // print bar 由于历史原因，默认情况下， mobx-localstor
React 全局状态管理 mobx+hooks+持久化 的使用
weixin_56295520的博客
12-22 1320
React 全局状态管理 mobx+hooks+持久化 的使用
umi-plugin-mobx:in在umijs中正常使用mobx-state-tree
03-21
:smiling_face_with_heart-eyes:与umi一起使用mobx-state-tree 。 :sparkles:特征 自动使用状态树节点包装路线组件。 通过使用umi/dynamic支持动态导入状态树节点。 使用Mobx生态系统而不是Redux。 解析规则与umi-...
vue-mobx:Vuejs 2的Mobx绑定
05-16
安装使用npm安装pkg： npm install vue-mobx --save或纱线 yarn add vue-mobx或凉亭 bower install vue-mobx用法显然，它适用于Mobx和Vuejs，可通过NPM安装： npm i --save mobx vue vue-mobx ：1.安装vue-mobx插件...
react-mobx-starter:用于React，Mobx和TypeScript的入门项目
05-02
react-mobx-starter项目 想要快速开始使用react，mobx和Typescript吗？ 签出该项目，以花费时间实现功能而不设置构建配置。 为了在开发过程中为您提供帮助，它会在运行过程中重新加载组件和样式表。 无需重新加载...
react-mobx-router:使用React Router 4和MobX +国际化创建React App
05-17
使用React Router 4和MobX状态树和国际化创建React App 该项目是使用 + 和来快速启动开发的样板，以维护App的状态和自定义国际化模块组件。 这个样板不再实现，但是如果您希望能够实现@decorators和Sass / Less / ...
mobx中跟新了数据视图没变化_【第1781期】MobX 简明教程
weixin_39835178的博客
11-21 596
前言SEEConf，2020年1月4号杭州见，C位抢票见文章末尾。今日早读文章由腾讯@whinc投稿分享。正文从这开始～～导读：MobX 是一个优秀的响应式状态管理库，在流行的状态管理库 Redux 之外为我们提供了其他选择。如果你还没有尝试过 MobX，我强烈建议你继续阅读本文，并跟着示例动手实践体验一下。本文是 MobX 的入门教程，文章包含 MobX 的设计哲学、状态派生模型、核心...
mobx-persist：坚持mobx存储
02-05
Mobx坚持 $ npm install mobx-persist --save 用法 import { observable } from 'mobx' import { create , persist } from 'mobx-persist' class SomeItem { @ persist @ observable name = 'some' @ persist @ observable count = 0 } class SomeStore { @ persist ( 'object' ) @ observable obj = { a
test-react-antd-mobx:使用LocalStorage与React，Antd和MobX一起测试应用程序
03-29
Create React App入门 该项目是通过引导的。 如何启动开发服务器 安装依赖项，运行开发服务器： npm ci npm start 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行该应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject
用 Mobx 实现 React 应用的状态管理
梅花寺
02-28 970
将 MobX 与 React 结合在一起的关键在于用 observer 包裹组件以及在组件中读取可观察对象，observer 不关心可观察对象从哪里来，也不关心如何读取可观察对象，只关心在组件中可观察对象是否可读。对于习惯面向对象编程的工程师而言，用 MobX 做状态管理会比用 Redux 做状态管理更得心应手。整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
React或Vue的token持久化
m0_56986233的博客
04-28 427
1.新建一个API文件夹，下面新增一个token.js文件，内容如下 //定义key值 const key = 'pc-key' //存token const storeToken = (token) => { return window.localStorage.setItem(key,token) } //取token const getToken = () => { return window.localStorage.getItem(key) } //清空token const
mobx快速入门
热门推荐
xiaopi3的博客
06-22 1万+
mobx快速入门mobx使用mobx quickstartmobx声明1. 使用函数封装：2. 使用修饰器computedautorunwhenreactionactionrunInActionobserverProviderinject参考示例 mobx mobx是啥：是一个用来管理状态的库，如果被观测组件发生改变，会自动渲染有关页面，告别setState。 mbox编程的3个重点： observer观测器：带有观测器的react组件或者属性被mobx实时观测 observable可观测对象：由mobx
MobX 在 hook 中的使用
weixin_33794626的博客
02-01 523
关于 mobX 在 react 16.8.0 以上的用法以下例子均取自官网文档 一般用法: import { observer, useLocalStore } from 'mobx-react'; const Hooks = observer(() => { const todo = useLocalStore(() => ({ title: 'C...
小程序的持久化存储
前端如逆水行舟...
10-05 1953
小程序的持久化存储 1.在vuex中声明一个叫做 saveToStorage的 mutations 方法,依靠setStorageSync方法2.
react-mobx的使用
03-31
3. 在React组件中使用store：使用`Provider`组件将store传递给React组件，然后使用`inject`和`observer`高阶组件包装组件。 ```javascript import React from 'react'; import { Provider, inject, observer } from...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值