react中使用mobx

	//1.下载mobx和mobx-react模块
	npm i mobx mobx-react -S

	//2.创建store文件用来管理状态(单个store)
	//通过mobx-react的Provider把store放入组件之中
	import { Provider } from "mobx-react";
	import Mobx from './components/mobx/index';
	import mo from './mobx/index'
	render(
	  <Provider mo={mo}>
	    <Mobx />
	  </Provider>
	  ,
	  document.getElementById("content")
	);

	//mobx/index.js
	import { observable } from 'mobx';
	class Mobx {
	    @observable num = 1;
	}

	//./components/mobx/index
	import React, { Component } from 'react';
	import { observer, inject } from 'mobx-react';
	@inject('mo')
	@observer
	class Mobx extends Component {
	    render() {
	        return (
	            <div>
	                {this.props.mo.num}
	            </div>
	        );
	    }
	}
	
	export default Mobx;

	//computed和action
	import { observable, computed, action } from 'mobx';
	class Mobx {
	    @observable num = 1;
	    @computed 
	        get priceNum() {
	            return this.num + '元'
	        }
	    @action 
	        addNum() {
	            this.num ++
	        }    
	}
	
	export default new Mobx();

	//components
	import React, { Component } from 'react';
	import { observer, inject } from 'mobx-react';
	@inject('mo')
	@observer
	class Mobx extends Component {
	    addNum = () => {
	        this.props.mo.addNum();
	    }
	    render() {
	        return (
	            <div>
	                {this.props.mo.num}
	                {this.props.mo.priceNum}
	                <div onClick={this.addNum}>addnum</div>
	            </div>
	        );
	    }
	}
	
	export default Mobx;

	//新建store文件和另一个item.js
	//item.js
	import { observable, computed, action } from 'mobx';
	class Mobx {
	    @observable name = 'wangzhi';
	      
	}
	
	export default new Mobx();
	//store.js
	import mo from "./index";
	import item from './item';
	
	const store = {
	    mo,
	    item,
	}
	export default store;
	//再在main.js引入store.js
	import store from './mobx/store';
	render(
	  <Provider {...store}>
	    <Mobx />
	  </Provider>
	  ,
	  document.getElementById("content")
	);
	//最后就可以通过inject使多个mobx
	import React, { Component } from 'react';
	import { observer, inject } from 'mobx-react';
	@inject('mo', 'item')
	@observer
	class Mobx extends Component {
	    addNum = () => {
	        this.props.mo.addNum();
	    }
	    render() {
	        return (
	            <div>
	                {this.props.item.name}
	                {this.props.mo.num}
	                {this.props.mo.priceNum}
	                <div onClick={this.addNum}>addnum</div>
	            </div>
	        );
	    }
	}
	
	export default Mobx;