react如何使用mobx封装管理用户登录的store

本篇内容主要讲解“react如何使用mobx封装管理用户登录的store”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“react如何使用mobx封装管理用户登录的store”吧!

MobX 介绍 

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

React和Mobx关系 

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

核心概念 

• 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”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！