mobx的使用

mobx+mobx-react-lite

引入mobx 和mobx mobx-react-lite

yarn add  mobx  mobx-react-lite

npm i  mobx  mobx-react-lite

基础使用

使用class 来定义store ， 注意使用计算属性的时候需要引入computed ，并且在constructor中 调用makeAutoObservable

//  count.ts
import { computed, makeAutoObservable } from "mobx";
interface dataType {
  age: number;
  img: string;
  name: string;
}
class CounterStore {
  count = 0; // 定义数据
  datalist: Array<dataType> = [];
  constructor() {
    makeAutoObservable(this, {
      getDoubleCOunt: computed,
    });
  }
  // 定义修改数据的方法
  addCount = (data: number) => {
    this.count += data;
  };
  get getDoubleCOunt() {
    return this.count * 2;
  }
  async asyncFun() {
    const res = await fetch(
      "https://www.fastmock.site/mock/6405986d1d74fb37597d8fbd15da76e7/demo/getlist"
    );
    const data = await res.json();
    this.datalist = data.data.list;
  }
}

const counter = new CounterStore();
export default counter;

// App.tsx
// 像react-redux那样需要connect 来连接，mobx使用observer 来包裹 组件

import { useState, useEffect } from "react";
import countStore from "./store/count";
import { observer } from "mobx-react-lite";
function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    countStore.asyncFun();
  }, []);
  return (
    <div className='App'>
      <p className='read-the-docs'>count : {countStore.count}</p>
      <p className='read-the-docs'>doubleCount : {countStore.getDoubleCOunt}</p>
      <button onClick={() => countStore.addCount(2)}>+</button>
      <button onClick={() => countStore.asyncFun()}>async</button>
      <ul>
        {countStore.datalist.map((item, index) => {
          return (
            <li>
              name:{item.name} -- age:{item.age}
              <img src={item.img} alt='' />
            </li>
          );
        })}
      </ul>
    </div>
  );
}

export default observer(App);

模块化统一管理

import React from 'react'

import counter from './counterStore'
import task from './taskStore'


class RootStore {
  constructor() {
    this.counterStore = counter
    this.taskStore = task
  }
}


const rootStore = new RootStore()

// context机制的数据查找链  Provider如果找不到 就找createContext方法执行时传入的参数
const context = React.createContext(rootStore)

const useStore = () => React.useContext(context)
// useStore() =>  rootStore  { counterStore, taskStore }

export { useStore }

// 组件中使用

import { observer } from 'mobx-react-lite'
// 导入方法
import { useStore } from './store'
function App() {
  // 得到store
  const store = useStore()
  return (
    <div className="App">
      <button onClick={() => store.counterStore.addCount()}>
        {store.counterStore.count}
      </button>
    </div>
  )
}
// 包裹组件让视图响应数据变化
export default observer(App)