react如何使用mobx封裝管理用戶登錄的store

本篇內(nèi)容主要講解“react如何使用mobx封裝管理用戶登錄的store”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“react如何使用mobx封裝管理用戶登錄的store”吧!

MobX 介紹 

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

React和Mobx關(guān)系 

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

核心概念 

• State：驅(qū)動應(yīng)用的數(shù)據(jù)

• Computed values：計算值。如果你想創(chuàng)建一個基于當(dāng)前狀態(tài)的值時，請使用 computed

• Reactions：反應(yīng)，當(dāng)狀態(tài)改變時自動發(fā)生

• Actions：動作，用于改變 State

• 依賴收集（autoRun）：MobX 中的數(shù)據(jù)以來基于觀察者模式，通過 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()
  }
}
// 導(dǎo)入useStore方法供組件使用數(shù)據(jù)
const StoresContext = React.createContext(new RootStore())
export const useStore = () => React.useContext(StoresContext)

到此，相信大家對“react如何使用mobx封裝管理用戶登錄的store”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！