## react项目中 mobx应该怎么用？

1. 新建store目录

  src

    store

      home

        index.js

      car

        index.js

      index.js

2. 在入口文件中 使用 Provider

  import store from './store'

  import { Provider } from 'mobx-react'

  ReactDOM.render(

   

     

   

  , document.getElementById('root'));

3. 哪个组件使用 ， 就在哪个组件中 "注入"  inject

  import {inject} from 'mobx-react'

 

  @inject('store')

4. 打造mobx 数据包

    import {

      observable, computed,action

    } from 'mobx'

    class Home {

      @observable  //监听 age

        age = 18

      @computed    //当age发生改变时， 自动触发

        get doubleAge(){

          return this.age *= 2

        }

      @action  // 用户操作  事件调用

        increment(){

          this.props.store.home.age ++

          console.log( this.props.store.home.age )

          //数据请求

          fetch('/data/data.json')

          .then(res => res.json())

          .then( result => console.log( result ))

          .catch( error => console.log( error ))

        }

    }

    const home = new Home()

    export default home

5. 打造store

  store/index.js

  import home from './home'

  const store = {

    //实例

    home

  }

  export default store

6. 组件内使用数据

  this.props.store.xxx 可以拿到数据

  注意：

  1. this.porps里面没有找到 @action 装饰器定义的方法， 但是可以直接使用，

  2. this会丢失

      this.props.store.home.increment.bind(this)

7. 在你要使用store的组件上记得做观察

  ```javascript

    import { observer } from 'mobx-react'

    @observer

    class Mine extends Component{

    }

  ```