react使用mobx封装管理用户登录的store示例详解

1、MobX 介绍

MobX 是一个简单、可伸缩的响应式状态管理库。通过 MobX 你可以用最直观的方式修改状态，其他的一切 MobX 都会为你处理好（如自动更新UI），并且具有非常高的性能。当状态改变时，所有应用到状态的地方都会自动更新。

1.1 React和Mobx关系

React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。

1.2 核心概念

  • State：驱动应用的数据
  • Computed values：计算值。如果你想创建一个基于当前状态的值时，请使用 computed
  • Reactions：反应，当状态改变时自动发生
  • Actions：动作，用于改变 State
  • 依赖收集（autoRun）：MobX 中的数据以来基于观察者模式，通过 autoRun 方法添加观察者

下面重点介绍下react使用mobx封装管理用户登录的store，主要是基于mobx封装管理用户登录的store。

store/login.Store.js

// 登录模块
import { makeAutoObservable } from "mobx"
import { http } from '@/utils'

class LoginStore {
  token = ''
  constructor() {
    makeAutoObservable(this)
  }
  // 登录
  login = async ({ mobile, code }) => {
    const res = await http.post('http://geek.itheima.net/v1_0/authorizations', {
      mobile,
      code
    })
    this.token = res.data.token
  }
}
export default LoginStore

store/index.js

import React from "react"
import LoginStore from './login.Store'

class RootStore {
  // 组合模块
  constructor() {
    this.loginStore = new LoginStore()
  }
}
// 导入useStore方法供组件使用数据
const StoresContext = React.createContext(new RootStore())
export const useStore = () => React.useContext(StoresContext)

到此这篇关于react使用mobx封装管理用户登录的store的文章就介绍到这了,更多相关react管理用户登录store内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React Native中Mobx的使用方法详解

    React Native中Mobx的使用方法详解

    前言 从今天开始我们来搞搞状态管理可否,这几天没怎么写博客,因为被病魔战胜了,tmd,突然的降温让我不知所措,大家最近注意安全,毕竟年底了,查的严,呸,大家注意保暖 特别声明:写该文只是写一下用MobX的思路,有很多地方我会直接放官网链接,因为官网已经写的够详细了 首先来个比较简单的,MobX. 引用官网上的一句话: MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程(transparently applying functional reactive programming - TF

  • React-Native使用Mobx实现购物车功能

    React-Native使用Mobx实现购物车功能

    在工作中,购物车场景非常常见.本文实现基于React-Native和Mobx实现两种购物车例子. 其中,后期会加入动画等其他.本期先实现基础功能. 二:基于State实现购物车 1-:ShoppingCarPage.js export default class ShoppingCarPage extends Component { static navigationOptions = { headerTitle : '基于State购物车', }; constructor(props) { s

  • 用React-Native+Mobx做一个迷你水果商城APP(附源码)

    用React-Native+Mobx做一个迷你水果商城APP(附源码)

    前言 最近一直在学习微信小程序,在学习过程中,看到了 wxapp-mall 这个微信小程序的项目,觉得很不错,UI挺小清新的,便clone下来研究研究,在看源码过程中,发现并不复杂,用不多的代码来实现丰富的功能确实令我十分惊喜,于是,我就想,如果用react-native来做一个类似这种小项目难不难呢,何况,写一套代码还能同时跑android和ios(小程序也是...),要不写一个来玩玩?有了这个想法,我便直接 react-native init 一个project来写一下吧(๑•̀ㅂ•́)و✧

  • 使用store来优化React组件的方法

    在使用 React 编写组件的时候,我们常常会碰到两个不同的组件之间需要共享状态情况,而通常的做法就是提升状态到父组件.但是这样做会有一个问题,就是尽管只有两个组件需要这个状态,但是因为把状态提到了父组件,那么在状态变化的时候,父组件以及其下面的所有子组件都会重新 render,如果你的父组件比较复杂,包含了其他很多子组件的话,就有可能引起性能问题. Redux 通过把状态放在全局的 store 里,然后组件去订阅各自需要的状态,当状态发生变化的时候,只有那些订阅的状态发生变化的组件才重新 r

  • react使用mobx封装管理用户登录的store示例详解

    1.MobX 介绍 MobX 是一个简单.可伸缩的响应式状态管理库.通过 MobX 你可以用最直观的方式修改状态,其他的一切 MobX 都会为你处理好(如自动更新UI),并且具有非常高的性能.当状态改变时,所有应用到状态的地方都会自动更新. 1.1 React和Mobx关系 React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染.而MobX提供机制来存储和更新应用状态供 React 使用. 1.2 核心概念 State:驱动应用的数据 Computed values:计算值.如果你想

  • vue通过cookie获取用户登录信息的思路详解

    思路 进入页面 若未登录,跳转至登陆页面 若已登录,从cookie中获取用户信息,并执行后续操作 2. 登录页面,存入cookie(setCookie) import {setCookie,getCookie}from 'src/js/cookieUtil' methods: { async cheack_n_p () { if( this.checkCode === this.pwd) { this.loginData = await getUserInfo(this.uname, this.

  • 使用纯JavaScript封装一个消息提示条功能示例详解

    目录 介绍 思路&布局 操作逻辑 完整代码 介绍 一个类似Element UI.Ant-Design UI等 UI 框架的消息提示功能,方便在任何网页环境中直接调用函数使用:区别在不依赖 js 及 css 引用,而是使用纯 js 进行封装实现,代码更精简,同时保持和 UI 框架一样的视觉效果(可自行修改成自己喜欢的样式) 代码仓库 在线预览效果(点击[登录].[点击复制]按钮时触发提示效果) 思路&布局 先来写单个提示条,并实现想要的过渡效果,最后再用逻辑操作输出节点即可:这里不需要父节点

  • Flutter封装组动画混合动画AnimatedGroup示例详解

    目录 一.来源 二.AnimatedGroup使用示例: 三.AnimatedGroup源码 最后 一.来源 项目中遇到混合动画的情况,每次实现都需要生命一堆属性,让代码变得杂乱,难以维护. 参考 iOS 组动画 CAAimationGroup, 随花半天时间封装一个混合动画组件 AnimatedGroup. 此组件基于极简.高扩展.高适用的封装原则,基本满足当前项目开发. 二.AnimatedGroup使用示例: // // AnimatedGroupDemo.dart // flutter_

  • python性能测试手机号验证码登录压测示例详解

    目录 引言 业务逻辑: 基本的校验规则如下: 解决方案: 测试方案: 压测脚本: 模块类方法: 引言 这两天遭遇了手机号登录相关的压测需求,算是比较棘手的.主要原因有两个,第一:之前从来没有接手过这个项目,不熟悉各种规则:第二:数据量偏大,需要开发配合协调校验规则. 业务逻辑: 请求发送验证码接口,发送成功(已绑定的手机号,且有效的用户状态)可以获取到登录的一个参数traceNo 使用traceNo.短信验证码.手机号请求登录接口 基本的校验规则如下: 手机号校验,排除一些不存在的号段,11位数

  • python使用selenium打开chrome浏览器时带用户登录信息实现过程详解

    python使用selenium打开chrome浏览器时带用户登录信息实现过程详解

    导读 我们在使用selenium打开google浏览器的时候,默认打开的是一个新的浏览器窗口,而且里面不带有任何的浏览器缓存信息.当我们想要爬取某个网站信息或者做某些操作的时候就需要自己再去模拟登陆 selenium操作浏览器 这里我们就以CSDN为例,来展示如何让selenium在打开chrome浏览器的时候带上用户的登录信息 打开chrome浏览器 from selenium import webdriver from selenium.webdriver import ChromeOpti

  • Asp.net mvc验证用户登录之Forms实现详解

    Asp.net mvc验证用户登录之Forms实现详解

    这里我们采用asp.net mvc 自带的AuthorizeAttribute过滤器验证用户的身份,也可以使用自定义过滤器,步骤都是一样. 第一步:创建asp.net mvc项目, 在项目的App_Start文件夹下面有一个FilterConfig.cs,在这个文件中可以注册全局的过滤器.我们在文件中添加AuthorizeAttribute过滤器如下: public class FilterConfig { public static void RegisterGlobalFilters(Glo

  • 使用redis管理用户登录会话的方法

    登录和cookie缓存 对于用来登录的cookie,有两种常见的方法可以将登录信息存储在cookie里面:一种是签名(signed)cookie,另一种是令牌(token)cookie. 签名cookie通常会存储用户名,可能还有用户ID.用户最后一次成功登陆的时间,以及网站觉得有用的其他任何信息.除了用户的相关信息外,签名cookie还包含一个签名,服务器可以使用这个签名来验证发送的信息是否未经改动(比如将cookie中的登录用户名改成另一个客户). 令牌cookie会在cookie里面存储一

  • 使用JSP实现简单的用户登录注册页面示例代码解析

    实验要求: 将实验2中的系统用户登录和注册页面改为JSP页面,并部署自己的Web应用于Tomcat服务器中 具体要求: 完成登录JSP页面设计和注册页面设计 在登录页面表单中使用request对象获取用户信息,建立新的JSP页面完成登录验证(用户名和密码自己指定即可). 验证结果显示(如登录成功/用户名密码错误,可以使用JavaScript,也可以使用新的JSP页面). 在注册页面表单中使用request对象获取用户注册信息(注册项目由自己指定),在新的JSP页面显示用户注册信息,并提示注册成功

  • Servlet连接数据库实现用户登录的实现示例

    Servlet连接数据库实现用户登录的实现示例

    目录 一.需求: 二.先复习一下JDBC 1.概述: 2.开发步骤: 三.代码实现: 1.登录界面代码: 2.登录成功界面: 3.servlet代码: 4.数据库数据 5.登录成功页面: 6.登录失败界面: 7.登录界面: 做一个小案例顺便复习一下jdbc的知识 一.需求: 用户在浏览器输入用户名和密码,如果数据库中有数据,提醒用户登录成功,如果没有数据,提醒用户重新登录 二.先复习一下JDBC 今天用的时候有些细节忘了,知识还是需要多次复习啊,并不是说学过就是自己的. 1.概述: 用java程

随机推荐