React结合mobx

1. npm install mobx mobx-react --save

2. npm install babel-plugin-transform-decorators-legacy --save-dev

3. package.json中配置

"babel": {

"presets": [

"react-app"

],

"plugins": [ 

[ "transform-decorators-legacy"]       

]

}

4. 创建Store.js

import {observable, action, useStrict} from 'mobx';

useStrict( true);

class Store {

@observable num = 1;

@action plus(){

this.num ++;

}

@action minus(){

this.num --;

}

}

export default Store;

5. 在index.js中加入Store

import {Provider} from 'mobx-react';

import Store from './utils/Store';

const store = new Store();

ReactDOM.render(

< Provider store= {store } >

< Routes />

</ Provider >,

document.getElementById( 'root'));

6. 在Main.js中使用状态

import {observer,inject} from 'mobx-react';

@inject( "store") @observer

class Main extends Component {

render() {

let {num} = this.props.store;

  return < div >

< div > {num } </ div >

< button onClick= {() =>{ this.props.store.plus()} } >加1 </ button >

< button onClick= {() =>{ this.props.store.minus()} } >减1 </ button >

</ div >

}

}

7. 实现效果

点击“加1”之后，变成

实现了计数器的功能。