Mobx的使用方法

一、安装mobx和mobx-react：

cnpm install mobx@5.15.4 mobx-react@6.3 -S

二、安装支持装饰器的组件：

如果没有安装支持装饰器的组件，会报错：

Support for the experimental syntax 'decorators-legacy' isn't currently enabled (5:3):

 使用以下方式解决：

第一步：

cnpm install @babel/plugin-proposal-decorators -D
cnpm install @babel/plugin-proposal-class-properties -D

第二步：

package.json中添加代码：

"plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ],
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ]
    ]

完整代码：

"babel": {
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ],
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ]
    ],
    "presets": [
      "react-app"
    ]
  }

三、安装模块babel-plugin-import：

cnpm install babel-plugin-import -S

四、VScode的设置中搜索experimentalDecorators勾上

五、基本使用：

新建

store文件夹：index.js

// index.js
import { observable, action, computed } from 'mobx'

class Todo {
  @observable num = 0 // State

  @action add () { // Mutations
    this.num++
  }
  @action.bound log () { // Actions
    console.log('异步请求数据成功')
  }

    @computed get dbNum () { // Getters
    return this.num * 2
  }
}

const store = new Todo()

export default store

注入

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './App.css';
import App from './App';
import { Provider } from 'mobx-react';
import store from './store';

ReactDOM.render(
    <Provider store={ store }>
    <App />
  </Provider>,
  document.getElementById('root')
);

组件内

Main.jsx

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

@inject ('store')

@observer class Main extends Component {
    render() {
    const { store } = this.props
    return (
      <div className="cont">
        <button onClick={ () => { store.log() } }>请求数据</button>
        <button onClick={ () => { store.add() } }>数字增加</button>
                <h1>{ store.num }</h1>
        <h2>{ store.dbNum }</h2>
      </div>
    )
  }
}

export default Main

或

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import { Button } from 'antd';
import ModalCom from './ModalCom'
import store from './store'

@observer class Main extends Component {
    render() {
        return (
            <>
                <div className="cont">
                    <Button type="primary" onClick={() => { store.log() }}>请求数据</Button>
                    &nbsp;
                    <Button type="primary" onClick={() => { store.add() }}>数字增加</Button>
                    &nbsp;
                    <Button type="primary" onClick={() => { store.isModalVisible = true }}>打开Modal</Button>
                    <h1>{store.num}</h1>
                    <h2>{store.dbNum}</h2>
                </div>

                <ModalCom />
            </>
        )
    }
}

export default Main

六、实例：在父组件中打开一个Modal

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './App.css';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

ModalCom.jsx：

import React, { Component } from 'react'
import { Modal } from 'antd';
import { observer } from 'mobx-react'
import store from './store'

@observer
class ModalCom extends Component {
    handleOk = () => {
        store.isModalVisible = false;
    }

    handleCancel = () => {
        store.isModalVisible = false;
    }

    render() {
        return (
            <Modal title="Basic Modal" visible={store.isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel}>
                <p>Some contents...</p>
                <p>Some contents...</p>
                <p>Some contents...</p>
            </Modal>
        )
    }
}

export default ModalCom

Home.jsx：

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import { Button } from 'antd';
import ModalCom from './ModalCom'
import store from './store'

@observer class Home extends Component {
    render() {
        return (
            <>
                <Button type="primary" onClick={() => {store.isModalVisible = true}}>打开Modal</Button>
                <ModalCom />
            </>
        )
    }
}

export default Home

store/index.js：

// index.js
import { observable, action, makeObservable, computed } from 'mobx'

class Todo {
  constructor () {
    makeObservable (this)
  }

  @observable num = 0 // State

  @observable isModalVisible = false

  @action add () { // Mutations
    this.num++
  }
  @action.bound log () { // Actions
    console.log('异步请求数据成功')
  }

    @computed get dbNum () { // Getters
    return this.num * 2
  }
}

const store = new Todo()

export default store