MobX 是一個(gè)簡(jiǎn)單、可伸縮的響應(yīng)式狀態(tài)管理庫(kù)。通過(guò) MobX 你可以用最直觀的方式修改狀態(tài)，其他的一切 MobX 都會(huì)為你處理好（如自動(dòng)更新UI），并且具有非常高的性能。當(dāng)狀態(tài)改變時(shí)，所有應(yīng)用到狀態(tài)的地方都會(huì)自動(dòng)更新。

1.1 React和Mobx關(guān)系

React 通過(guò)提供機(jī)制把應(yīng)用狀態(tài)轉(zhuǎn)換為可渲染組件樹(shù)并對(duì)其進(jìn)行渲染。而MobX提供機(jī)制來(lái)存儲(chǔ)和更新應(yīng)用狀態(tài)供 React 使用。

1.2 核心概念

State：驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)
Computed values：計(jì)算值。如果你想創(chuàng)建一個(gè)基于當(dāng)前狀態(tài)的值時(shí)，請(qǐng)使用 computed
Reactions：反應(yīng)，當(dāng)狀態(tài)改變時(shí)自動(dòng)發(fā)生
Actions：動(dòng)作，用于改變 State
依賴收集（autoRun）：MobX 中的數(shù)據(jù)以來(lái)基于觀察者模式，通過(guò) autoRun 方法添加觀察者

下面重點(diǎn)介紹下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()
  }
}
// 導(dǎo)入useStore方法供組件使用數(shù)據(jù)
const StoresContext = React.createContext(new RootStore())
export const useStore = () => React.useContext(StoresContext)

到此這篇關(guān)于react使用mobx封裝管理用戶登錄的store的文章就介紹到這了,更多相關(guān)react管理用戶登錄store內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

React HOC高階組件深入講解
高階組件就是接受一個(gè)組件作為參數(shù)并返回一個(gè)新組件（功能增強(qiáng)的組件）的函數(shù)。這里需要注意高階組件是一個(gè)函數(shù)，并不是組件，這一點(diǎn)一定要注意，本文給大家分享React 高階組件HOC使用小結(jié)，一起看看吧
2022-10-10
基于react框架使用的一些細(xì)節(jié)要點(diǎn)的思考
下面小編就為大家?guī)?lái)一篇基于react框架使用的一些細(xì)節(jié)要點(diǎn)的思考。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
React中進(jìn)行條件渲染的實(shí)現(xiàn)方法
React是一種流行的JavaScript庫(kù),它被廣泛應(yīng)用于構(gòu)建Web應(yīng)用程序,在React中,條件渲染是一個(gè)非常重要的概念,它允許我們根據(jù)不同的條件來(lái)呈現(xiàn)不同的內(nèi)容,在本文中,我們將探討React如何進(jìn)行條件渲染,需要的朋友可以參考下
2023-11-11
antd+react中upload手動(dòng)上傳單限制上傳一張
本文主要介紹了antd+react中upload手動(dòng)上傳單限制上傳一張，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
Remix如何支持原生?CSS方法詳解
這篇文章主要為大家介紹了Remix如何支持原生CSS的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
React18的useEffect執(zhí)行兩次如何應(yīng)對(duì)
這篇文章主要給大家介紹了關(guān)于React18的useEffect執(zhí)行兩次如何應(yīng)對(duì)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用React具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-07-07
React組件二次包裝的具體實(shí)現(xiàn)
本文主要介紹了React組件二次包裝的具體實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
詳解react應(yīng)用中的DOM DIFF算法
這篇文章主要介紹了react應(yīng)用中的DOM DIFF算法，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下
2021-04-04
react-router v4如何使用history控制路由跳轉(zhuǎn)詳解
這篇文章主要給大家介紹了關(guān)于react-router v4如何使用history控制路由跳轉(zhuǎn)的相關(guān)資料，文中通過(guò)示例代碼介紹的的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2018-01-01
TS裝飾器bindThis優(yōu)雅實(shí)現(xiàn)React類組件中this綁定
這篇文章主要為大家介紹了TS裝飾器bindThis優(yōu)雅實(shí)現(xiàn)React類組件中this綁定，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11