类组件使用mobx实现数据修改以及请求数据

Posted 2021-09-07 老张在线敲代码

src下创建新的共享数据文件test.js

import {observable, computed, action, autorun,runInAction, configure,makeAutoObservable} from 'mobx';
import Unit from "../unit/index";
configure({ enforceActions: 'observed' })//开启严格模式
// https://cn.mobx.js.org/best/actions.html#runinaction-%E5%B7%A5%E5%85%B7%E5%87%BD%E6%95%B0
class Store {
    @observable cls="web1908"
    constructor(){
        makeAutoObservable(this)
    }
    @observable resume={
        base:{
            name:"",
            age:"",
            sex:""
        },
        exp:{

        }
    }
    @action
    update=()=>{
        this.cls="web1908A";
        this.resume={
            base:{
                name:"张",
                age:"22",
                sex:"男"
            }
        }
    }
    @observable pddList=[]
    @action 
    getPdd=()=>{
        Unit.getApi2("/home/mediareports",{
            page_number:1,
            page_size:20
        },{}).then((res)=>{
            runInAction(()=>{
                this.pddList=res.data.data
            })
            //黄色感叹提示就没辽
        })
    }
}

export default Store;

router.js中配置

页面中具体操作

import React, { Component } from 'react';
import {NavLink,withRouter} from "react-router-dom"
import {observer,inject} from 'mobx-react';
@withRouter
@inject('Test')
@observer
class index extends Component {
    constructor(props){
        super(props)
        this.state={
            obj:{
                a:1,
                b:2
            }
        }
    }
    heBing(){
        const {obj}=this.state
        const newobj = {
            a:2
        }
        const obj2 = {
            ...obj,
            ...newobj
        }
        this.setState({
            obj:obj2
        })
        console.log(obj)

    }
    lists(){
        const {pddList}=this.props.Test
        return pddList.map((item,index)=>{
            return <p key={index}>{item.main_title}</p>
        })
    }
    componentDidMount(){
        const {getPdd}=this.props.Test
        getPdd()
        this.lists()
    }
    render() {
    const {cls,resume,update,pddList}=this.props.Test
    const {obj}=this.state

        return (
            <div>
                <div>
                    
                </div>
                你的班级是：{cls}
                <br />
                您的姓名：{resume.base.name}
                <br />
                您的年龄：{resume.base.age}
                <br />
                您的性别：{resume.base.sex}
                <br />
                <input type="button" value="更新信息" onClick={()=>{update()}} />
                <br />
                {obj.a}---{obj.b}
                <br />
                <input type="button" value="修改a" onClick={()=>{this.heBing()}} />
                <br />
                {
                pddList.length>0&&this.lists()
                }
                
            </div>
        );
    }
}

export default index;