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
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;