1、安裝

1 $ yarn add mobx mobx-react

2、新建store/index.js，存放資料(以下思路僅限於父子元件的簡單應用)

　　注意：這裡暫時沒使用裝飾器@observable，裝飾器和全域性資料見下一節

 1 import { observable, action } from 'mobx'
 2 
　　// 觀察器(狀態)
 3 const appState = observable({
 4   timer: 100
 5 })
　　// 方法
 6 appState.resetTimer = action(() => {
 7   appState.timer = 0
 8
 
 })
 9 // 方法
10 appState.increase = action(() => {
11   console.log('increase')
12   appState.timer += 1;
13 })
14 
15 export default appState;

3、回到根元件（父元件）App，引入appState並傳入屬性

 1 import React from 'react';
 2 import appState from './store';   // 新增
 3 import TodoList from "./components/TodoList";
 
 4 
 5 export default class App extends React.Component {
 6   render() {
 7     return (
 8       <div className='app'>
 9         <Child appState={appState}/>   // 新增
10       </div>
11     )
12   }
13 }

4、切換到子元件

 1 import React, {Component} from 'react';
 2 import { observer } from 'mobx-react';
 
 3 
 4 class Child extends Component {
 5 
 6   constructor(props) {
 7     super(props);
 8   }
 9   // 該繫結方式屬於ES7，需要安裝babel-preset-stage-2, 並新增到.babelrc中
10   _resetTimer = ()=> {
11     this.props.appState.resetTimer()    // 對應appState中action的resetTimer方法
12   }
13   _increase = () => {
14     this.props.appState.increase()  　　// 對應appState中action的increase方法
15   }
16   render() {
17     return (
18       <div>
19         <h2>Child Component</h2>
20         <p>{this.props.appState.timer}</p>
21         <button onClick={this._resetTimer}>復位</button>
22         <button onClick={this._increase}>增加</button>
23       </div>
24     );
25   }
26 }
27 
28 export default observer(Child);    // 非裝飾器的普通方式, 將元件傳入observer觀察器中，否則store接受不到元件的事件

以上是Mobx最簡單的使用方法，官方推薦使用裝飾器模式。Mobx就類似Vuex， 需要state和action即可完成一個簡單的狀態管理

大概思路：

1 . 在store中宣告狀態(state)和方法(action) 分別使用Mobx的observer和action封裝

2. 在父元件中匯入state並屬性傳給子元件

3 .子元件通過props接收state, 在自定義的方法中呼叫store的方法，使store內的方法去改變state的值