# 創(chuàng)建項(xiàng)目
$ npm create-react-app react_mobx_app

# 安裝mobx
npm install mobx --save

# 中間件工具 mobx-react-lite
$ npm install mobx-react-lite

# 官網(wǎng)推薦：mobx與react綁定庫
$ npm install mobx-react --save

// 編寫第一個mobx store小案例
import { makeAutoObservable } from 'mobx'

class CounterStore {
  // 1.定義數(shù)據(jù)
  count = 0
  constructor() {
    // 2.把數(shù)據(jù)弄成響應(yīng)式
    makeAutoObservable(this)
  }
  // 3.定義action函數(shù)，用來修改數(shù)據(jù)
  addCount = () => {
    this.count++;
  }
}

// 4.實(shí)例化導(dǎo)出給react使用
const counterStore = new CounterStore()
export { counterStore }

import { counterStore } from '../store/counter'
import { observer } from 'mobx-react-lite'

function Count() {
  return (
    <div>
      {/* 1.把store中的count渲染出來 */}
      <button>{counterStore.count}</button>
      <br /><hr />
      {/* 2.通過點(diǎn)擊事件觸發(fā)action函數(shù)，修改count值 */}
      <button onClick={counterStore.addCount}>點(diǎn)我+1</button>
    </div>
  )
}
// 包裹組件讓視圖響應(yīng)數(shù)據(jù)變化
export default observer(Count)

// counterStore.js
import { makeAutoObservable, computed } from 'mobx'

class CounterStore {
  // 1.聲明一個list數(shù)組
  list = [1, 2, 3, 4, 5, 6]
  constructor() {
    makeAutoObservable(this, {
      // 3.標(biāo)記計(jì)算屬性
      // 不標(biāo)記不影響計(jì)算屬性的使用，這里的標(biāo)記只是為了讓代碼更直觀，程序員一看到這行代碼就知道filterList是通過計(jì)算屬性得來的
      filterList: computed
    })
  }
  // 2.定義計(jì)算屬性
  get filterList() {
    return this.list.filter(item => item > 2)
  }
  changeList = () => {
    this.list.push(7, 8, 9)
  }
}

const counterStore = new CounterStore()
export { counterStore }

// Count.jsx
import { counterStore } from '../store/counter'
import { observer } from 'mobx-react-lite'

function Count() {
  return (
    <div>
      {/* 使用計(jì)算屬性 */}
      {counterStore.filterList.join('-')}
      <button onClick={counterStore.changeList}>修改List</button>
    </div>
  )
}
// 包裹組件讓視圖響應(yīng)數(shù)據(jù)變化
export default observer(Count)

src
├─App.jsx
├─index.js
├─store
|   ├─count.Store.js
|   ├─index.js
|   └list.Store.js
├─components
|     ├─Count.jsx
|     └List.jsx

import { makeAutoObservable } from 'mobx'
class CountStore {
  count = 0
  constructor() {
    makeAutoObservable(this)
  }
  addCount = () => {
    this.count++
  }
}
export { CountStore }

import { makeAutoObservable } from "mobx";
class ListStore {
  constructor() {
    makeAutoObservable(this)
  }
  list = ['react', 'vue']
  changeList = () => {
    this.list.push('angular')
  }
}
export { ListStore }

// 組合子模塊 封裝統(tǒng)一導(dǎo)出的供組件使用的方法
import React, { useContext } from "react";
import { CountStore } from "./count.Store";
import { ListStore } from "./list.Store";
class RootStore {
  constructor() {
    // 對子模塊進(jìn)行實(shí)例化操作
    // 將來實(shí)例化rootstore的時候，rootstore實(shí)例上有兩個屬性，分別存放了子模塊的兩個實(shí)例。
    this.countStore = new CountStore()
    this.listStore = new ListStore()
  }
}
// 使用react context機(jī)制，完成統(tǒng)一方法封裝

// 1.實(shí)例化rootStore注入context
const rootStore = new RootStore()
const context = React.createContext(rootStore)

// 2.導(dǎo)出useStore方法，供組件通過調(diào)用該方法使用根實(shí)例
// 作用：通過useContext拿到rootStore實(shí)例對象，然后返回
// 只要在業(yè)務(wù)組件中 調(diào)用useStore() 就可以拿到 rootStore實(shí)例對象
const useStore = () => useContext(context)
export { useStore }

import { observer } from 'mobx-react-lite'
import { useStore } from './store'
function App() {
  const { countStore } = useStore()
  return (
    <div className="App">
      <button onClick={() => countStore.addCount()}>
        {countStore.count}
      </button>
    </div>
  )
}
// 包裹組件讓視圖響應(yīng)數(shù)據(jù)變化
export default observer(App)