React( mobx的使用以及配置 )

#react脚手架 - Mobx配置 （装饰器）

1. 创建项目
   create-react-app app

2. 进入项目
   cd app

3. 进行配置文件抽离
   yarn eject

4. 安装mobx mobx-react
   yarn add mobx mobx-react
   注意： 如果git冲突
   解决： 我们要原操作先放到本地暂存盘
   git add .
   git commit -m ‘安装mobx mobx-react’
   注意不要git push

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(



, 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)