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”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！