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直接引用即可，异步使用也一样