mobx Provider和inject管理mobx

将提供类似react-redux的Provider操作,使得不用在每个需要mobx的组件中引入mobx仓库

1、安装
	cnpm install mobx-react --save
	
2、在index.js引入Provider和mobx仓库

	import {Provider} from 'mobx-react'
	import xx from './store/index'  mobx仓库
	
	将Provider包裹在最外层
	
	ReactDOM.render(
	  <Provider  xxx={xx}>
	    <React.Fragment>
	      <App/>
	    </React.Fragment>
	  </Provider>,
	  document.getElementById('root')
	);
	
3、组件使用mobx仓库
	import {inject,observer} from 'mobx-react'
	
	方式一:直接导入仓库
	
		@inject('xxx')
		@observer 类组件
		
		获取:this.props.xxx.状态/方法名
	
	方式二:按需导入
		@inject((x)=>({
			键名:x.Provider的xxx.状态/方法名
				其中:x.Provider的xxx获取到xxx的内容
		}))
		@observer 类组件
		
		获取:this.props.键名
		
4、多个mobx仓库
	(1)创建好多个仓库的实例后,集合导出
	(2)在index.js中将,多个仓库的集合对象,一起传入Provider中
	
			方式一:直接导入仓库
	
		@inject('xxx')
		@observer 类组件
		
		获取:this.props.xxx.导出的仓库名.状态/方法名		
		
	方式二:按需导入
		@inject((x)=>({
			键名:x.Provider的xxx.导出的仓库名.状态/方法名		
		}))
		@observer 类组件
		
		获取:this.props.键名

代码示例:
mobx仓库:

import {observable,computed,action} from 'mobx'

class Counter {
    name='counter';
    @observable count=100;

    @computed get doubleCount(){
        return this.count*2;
    }

    @action.bound increament(){
        this.count+=1;
    }

    @action.bound decreament(){
        this.count-=1;
    }

    @action.bound increamentAsync(){
        setTimeout(action('yibu',()=>{
            this.count+=2;
        }),2000)
    }

}


class Counter2 {
    name='counter2';
    @observable count2=200;

}

const CounterStore=new Counter();
const Counter2Store=new Counter2();

export {
    CounterStore,
    Counter2Store
}

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {HashRouter,Route,Switch,Redirect} from 'react-router-dom'
import {mainRouter} from './routes'
import App from './App'
import * as serviceWorker from './serviceWorker';
import {Provider} from 'mobx-react'
import * as stores from './store/index'

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

App.js:

import React from 'react';
import './App.css';

import {adminRouter} from './routes'
import {Route,Switch,Redirect} from 'react-router-dom'
import Add from './components/add'
import Counter from './components/counter'
import Sub from './components/sub'

import {inject,observer} from 'mobx-react'
@inject('store')
@observer
class App extends React.Component {
componentDidMount()
{
  console.log(this.props.store);
}
  render()
  {
    return (
      <div className="">
        <button onClick={this.props.store.CounterStore.increamentAsync}>+</button>     
        <Counter/>
        <Sub></Sub>
        {this.props.store.CounterStore.doubleCount}   
      </div>
    );

  }
}

export default App;

Counter.js:

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

@inject((store)=>({
    count:store.store.CounterStore.count,
    count2:store.store.Counter2Store.count2
}))
@observer
class App extends Component{

    componentDidMount()
    {
        // console.log(this.props.f.store.CounterStore)
    }

    render()
    {
        return(

            <div>
                {this.props.count2}
               {this.props.count}
            </div>
        )
    }
}

export default App      

Sub.js:

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

@inject((store)=>({
    count2:store.store.Counter2Store.count2,
    decreament:store.store.CounterStore.decreament
}))
@observer
class App extends Component{

    render()
    {
        return(

            <div>
                <button onClick={this.props.decreament}>-</button>     
                store2:{this.props.count2}
            </div>
        )
    }
}

export default App