mobx Provider和inject管理mobx

曾经终败给现在 2021-07-25 02:11 655阅读 0赞

将提供类似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,PropTypes as ob} from 'mobx-react'
    	static propTypes={
    		xx:ob.observableArray,     observable数组类型的参数验证
    		xxx:ob.observableObject    observable对象类型
    	}
    
    	方式一:直接导入仓库
    	
    		@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