Mobx配置文档

学无止境，望君把握时间。

Mobx配置（装饰器）：
1.创建项目：
cerate-react-app you name
2.进入项目
cd you name
3.进行配置文件抽离
yarn eject
4.安装mobx mobx-react
yarn add mobx mobx-react
5.配置装饰器（修饰器 es6 ） babel:

  yarn add babel-plugin-transform-decorators-legacy -D
  yarn add @babel/preset-env -D
  yarn add babel-plugin-transform-class-properties -D
  yarn add @babel/plugin-proposal-decorators -D

6.配置package.json:

"babel": {
 "plugins": [
   [
     "@babel/plugin-proposal-decorators",
     {
       "legacy": true
     }
   ],
   "transform-class-properties"
 ],
 "presets": [
   "react-app",
   "@babel/preset-env"
 ]
 },

注意;

  [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      "transform-class-properties"

在项目中使用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(
    <Provider store = {store}>
      <Show />
    </Provider>
  , 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 //当数据发生改变，自动触发
      get doubelage (){
         return this.age *= 2
      }
    @action //用户操作，事件调用。
     increment() {
        this.props.store.home.age ++
        //数据请求
        fetch('data.josn')
         .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) 
3.在你要使用store的组件上记得做观察
import { observer } from 'mobx-react'

    @observer
    class Mine extends Component{
      
    }