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

Posted on by

1、MobX 介紹 

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

1.1 React和Mobx關系 

React 通過提供機制把應用狀態轉換為可渲染組件樹並對其進行渲染。而MobX提供機制來存儲和更新應用狀態供 React 使用。 

1.2 核心概念 

  • 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的文章就介紹到這瞭,更多相關react管理用戶登錄store內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：