日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

作者：船長在船上 ? 更新時間： 2022-08-04 編程語言

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)

原文鏈接：https://blog.csdn.net/SmartJunTao/article/details/125232563

欄目分類
最近更新