Mobx是一个强大的状态管理工具，按照笔者的理解，它就是个存东西的，
和localstorage相比，好处是可以牵一发而动全身，举一个简单地例子：Mobx中存有一个变量a=1,现在有A页面和B页面中都用到了变量a，在a页面中设置a=2，那么B页面中a的值也会变成2。

简陋的关系图

一、装包

npm install mobx --save
npm install mobx-react --save
npm i customize-cra --save
npm i react-app-rewired --save
npm i @babel/plugin-proposal-decorators --save

二、项目根目录新建config-overrides.js文件

目录

const { override, addDecoratorsLegacy } = require('customize-cra');
module.exports = override(
  addDecoratorsLegacy()
);

三、修改package.json文件中的script

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

四、在src目录下新建mobx文件夹用于存放mobx相关文件

mobx.js

import { observable, action } from 'mobx'
class Mobx {
  @observable number;

  constructor() {
    this.number = 0
  }

  @action
  addNumber = (number) => {
    this.number = number
  }

}
const MyMobx = new Mobx();
export { MyMobx };

store.js

import { MyMobx } from './mobx'


const store = {
  MyMobx
}

export default store

目录

五、在路由文件中通过Provider注入Mobx

路由文件注入

六、在需要Mobx的页面导入及注入和使用

image.png

注入后，当想要操作mobx文件MyMobx的时候，只需 this.pros.MyMobx.后边接变量即可获取变量，后边接函数即可使用函数操作mobx中的变量，详情见代码

七、页面代码

page1

import React, { Component } from 'react'
import { observer, inject } from 'mobx-react'

@inject(['MyMobx'])
@observer

class Page1 extends Component {
  constructor(props) {
    super(props)
    this.state = {
    };
  };
  render() {
    return (
      <div
      style={{
        width: '100%',
        height: window.innerHeight,
        background: '#001D37',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection:'column'
      }}>
        <div
          onClick={() => {
            // this.props.history.push('/page2/' + 666 + '')
            this.props.history.push({ pathname: '/page2' })
            // this.props.history.push({pathname:"/page2",state : { id : '111' }});
          }}
          style={{
            width: '500px',
            height: '200px',
            background: '#fff',
            padding: '30px',
            borderRadius: '10px',
            lineHeight: '200px',
            textAlign: 'center',
            cursor: 'pointer',
          }}>
          我是页面一一一一一一一
          点我可以去页面二
        </div>
        <div
        onClick={()=>{
          this.props.MyMobx.addNumber()
        }}
        style={{
          width: '300px',
          height: '100px',
          marginTop:'20px',
          background: '#fff',
          lineHeight:'100px',
          textAlign:'center',
          borderRadius:'10px',
          cursor: 'pointer',
        }}>
          mobx中的数字是{this.props.MyMobx.number}&nbsp;&nbsp;&nbsp;&nbsp;
          <div style={{display:'inline'}}>点击增加</div>
        </div>
      </div>
    )
  }
}

export default Page1

page2

import React, { Component } from 'react'
import { observer, inject } from 'mobx-react'

@inject(['MyMobx'])
@observer
class Page2 extends Component {
  constructor(props) {
    super(props)
    this.state = {
    };
  };
  render() {
    // console.log(this.props.location.state.id)
    console.log(this.props.location.params)
    return (
      <div style={{
        width: '100%',
        height: window.innerHeight,
        background: '#001D37',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'column'
      }}>
        <div
          onClick={() => {
            this.props.history.push('/')
            // this.props.history.push({pathname:'/'}) 
            // this.props.history.push({pathname:"/",state : { id : '222' }});
          }}
          style={{
            width: '500px',
            height: '200px',
            background: '#ff0',
            padding: '30px',
            borderRadius: '10px',
            textAlign: 'center',
            lineHeight: '200px',
            cursor: 'pointer',
          }}>
          我是页面二二二二二二二二
          点我可以去页面一
        </div>
        <div
          onClick={() => {
            this.props.MyMobx.addNumber()
          }}
          style={{
            width: '300px',
            height: '100px',
            marginTop: '20px',
            background: '#ff0',
            lineHeight: '100px',
            textAlign: 'center',
            borderRadius: '10px',
            cursor: 'pointer',
          }}>
          mobx中的数字是{this.props.MyMobx.number}&nbsp;&nbsp;&nbsp;&nbsp;
          <div style={{ display: 'inline' }}>点击增加</div>
        </div>
      </div>
    )
  }
}

export default Page2

八、欲知完整代码如何请见GitHub

https://github.com/jade-kylin/mobx-study.git

git clone https://github.com/jade-kylin/mobx-study.git

执行即可获取到完整项目文件

遇到报错及解决

error

解决办法：将export class Page1 extends 、、、中的export删掉，靠最后的export default Page1抛出页面