1. 在powershell里安裝依賴
   (直接npm i mobx或者npm i mobx-react是會報錯的)

npm i mobx mobx-react --save

save是下載到"dependencies"里

npm i mobx-react-lite

lite是配合hook使用的

2. 添加store.ts文件(在此附上全部文件列表)
   

• store.ts

import { makeAutoObservable } from 'mobx'class Store {// 顏色列表colorList = ['#0099CC', '#CC9966', '#CC3333', '#FF9966', '#FFCCCC', '#FF6666', '#666666', '#CC9999', '#99CC66', '#0066CC']// 當前顏色color = '#0099CC'// 變色函數setColor() {this.color = this.colorList[Math.floor(Math.random() * 10)]}constructor() {makeAutoObservable(this)}
}export default new Store()

• App.tsx

import React from 'react'
import { observer } from 'mobx-react'
import store from './store'function App() {// console.log(store.color)return (<div className="App"><p>Hello,Dust</p><span style={{ backgroundColor: store.color, padding: 10, cursor: 'pointer' }} onClick={() => store.setColor()}>Click Me</span></div>)
}// 注意這里是用observer包裹的export default observer(App)

• 運行結果:一個點一下就變顏色的span
  
  
  

總結

以上是生活随笔為你收集整理的在react hook里使用mobx(配置mobx依赖)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。