react的状态管理库 Mobx

下载

npm i mobx mobx-react --save

创建一个store

import {
          
    makeAutoObservable } from mobx
class Mystore {
          
   
    todos = [
        {
          
   
            id: 0,
            context: "吃饭",
            done: false
        },
        {
          
   
            id: 1,
            context: "睡觉",
            done: false
        },
        {
          
   
            id: 2,
            context: "打豆豆",
            done: true
        },
    ]
    num=0
    addtodo(todo) {
          
   
        this.todos.push(todo)
    }
    asyncAddNum() {
          
   
        this.num++
    }
    updatatodo(parm){
          
   
    for(let i of this.todos ){
          
   
        if(i.id===parm.id){
          
   
            i.done=parm.done
        }
    }
    }
   delealldone(){
          
   
    this.todos=this.todos.filter(item=>{
          
   
        return item.done!==true
    })
   }
    constructor() {
          
   
        makeAutoObservable(this)
    }
}
export default new Mystore()

在ui界面中使用 使用状态

import React from react
import "./body.css"
import {
          
    observer } from mobx-react;
import Listitem from "./list/List"
import store from "../../store/MobxStore"
 function body() {
          
   
    return (
        <div>
            <ul className="todo-main">
                {
          
   
                    store.todos.map((item,index)=>{
          
   
                        return <Listitem key={
          
   index} todo={
          
   item} index={
          
   index}/>
                    })
                }
                
            </ul>
        </div>
    )
}
export default observer(body)

使用方法 跟state直接引用即可，异步使用也一样