快捷導(dǎo)航

react使用mobx封裝管理用戶登錄的store示例詳解

更新時(shí)間：2022年06月12日 07:57:30 作者：船長在船上

這篇文章主要介紹了react基于mobx封裝管理用戶登錄的store,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1、MobX 介紹

MobX 是一個(gè)簡單、可伸縮的響應(yīng)式狀態(tài)管理庫。通過 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 通過提供機(jī)制把應(yīng)用狀態(tài)轉(zhuǎn)換為可渲染組件樹并對其進(jìn)行渲染。而MobX提供機(jī)制來存儲(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í)，請使用 computed
Reactions：反應(yīng)，當(dāng)狀態(tài)改變時(shí)自動(dòng)發(fā)生
Actions：動(dòng)作，用于改變 State
依賴收集（autoRun）：MobX 中的數(shù)據(jù)以來基于觀察者模式，通過 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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

React使用xlsx和js-export-excel實(shí)現(xiàn)前端導(dǎo)出
這篇文章主要為大家詳細(xì)介紹了React如何分別使用xlsx和js-export-excel實(shí)現(xiàn)前端導(dǎo)出功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下
2024-02-02
淺談React Native Flexbox布局(小結(jié))
這篇文章主要介紹了淺談React Native Flexbox布局(小結(jié)),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-01-01
React 的調(diào)和算法Diffing 算法策略詳解
React的調(diào)和算法，主要發(fā)生在render階段，調(diào)和算法并不是一個(gè)特定的算法函數(shù)，而是指在調(diào)和過程中，為提高構(gòu)建workInProcess樹的性能，以及Dom樹更新的性能，而采用的一種策略，又稱diffing算法
2021-12-12
mobx在react hooks中的應(yīng)用方式
這篇文章主要介紹了mobx在react hooks中的應(yīng)用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
React Fragment介紹與使用詳解
本文主要介紹了React Fragment介紹與使用詳解，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
react native圖片解析流程詳解
這篇文章主要為大家介紹了react native圖片解析流程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
React從命令式編程到聲明式編程的原理解析
這篇文章主要介紹了React從命令式編程到聲明式編程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-09-09
react中Hooks的理解和用法小結(jié)
Hook是 React 16.8 的新增特性，它可以讓你在不編寫class的情況下使用state以及其他的React特性，這篇文章主要介紹了react中Hooks的理解和用法,需要的朋友可以參考下
2023-05-05
ReactNative踩坑之配置調(diào)試端口的解決方法
本篇文章主要介紹了ReactNative踩坑之配置調(diào)試端口的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
React前端路由應(yīng)用介紹
前端應(yīng)用大多數(shù)是SPA（單頁應(yīng)用程序），也就是只有一個(gè)HTML頁面的應(yīng)用程序。因?yàn)樗挠脩趔w驗(yàn)更好、對服務(wù)器壓力更小，所以更受歡迎。為了有效的使用單個(gè)頁面來管理多頁面的功能，前端路由應(yīng)運(yùn)而生
2022-09-09