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