mobx使用

什么是mobx？ 

官方文档是这样介绍的，简单、可扩展的状态管理（Simple, scalable state management）。简单来说，Mobx可以很好的管理应用程序的状态/数据，同时又简单、易扩展。

常用API介绍：

1.observable（可观察的）

功能：用来观测一个数据。该数据是原始数据类型，但经observable包装后，就变成了mobx 定义的类型。

用法：@observable num = 6

2.autorun

功能：当观测的数据发生变化的时候，如果该变化的值处在autorun中，那么autorun就会自动执行。初始执行一次, 当依赖的值有变化时候就会执行里面的函数, 此方法在mobx-react中被@observer代替

用法：autorun(() => console.log(this.counter));

3.action

功能：用来修改状态

用法：@action add(){this.num++}

4.Observer

功能：当可观察数据发生变化时，组件会自动响应，并重新渲染

用法：observer(Component)

@observer export class HomeContainer extendsReact.Component<HomeContainerProps, {}> {}

5.computed(计算属性)

功能：根据可观察变量经过纯函数计算得来的值，使用时才会计算，没有使用时不会去计算

用法：@computed get total() {return this.num*this.price}

mobx安装配置：

1.准备工作 优先使用装饰器http://es6.ruanyifeng.com/#docs/decorator ；

2.装饰器的安装：

2.1：npm install --save-dev @babel/plugin-proposal-decorators 
2.2：npm run eject  //把project的相关配置信息以及依赖信息弹射出来
Are you sure you want to eject? This action is permanent. Yes
(如果报错   运行  
 git  add . 
 git  commit -m '这里的备注不能丢'  
把项目提前备份) 
解决报错以后再运行npm  run  eject

3.配置package.json：

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

4.在项目的根目录下创建jsconfig.json （和src同级，不是在src中在写入配置）：

{
   "compilerOptions": {
   "experimentalDecorators": true
  }
}

5.安装npm i mobx mobx-react --save

mobx使用

1.在src中创建文件夹store,然后再建一个index.js，在里面声明全局数据等

import  {observable,action,computed,autorun} from "mobx"

class  goodsInfo{
    @observable num = 10;　　／／设置属性可观察
    @observable price = 68;

    @action Add(){　／／定义属性的修改方法
        this.num++;
    }
    @action  Reduce(){
        this.num--;
    }
    @action asyncAdd(){／／定义异步方法
        setTimeout(()=>{
            console.log(this.num);
            this.Add();
        },5000);
    }
    @computed  get total(){／／定义计算属性
        return this.num*this.price
    }
}

2.在入口文件中(即根目录下的index.js)：

import React from "react";
import ReactDom from "react-dom";
import { Provider } from "mobx-react"
import App from "./app"
import store from "./mobx/index"
//使用provider进行数据的包裹
ReactDom.render(<Provider store={store}><App></App></Provider>, document.getElementById("root"))

3.在页面中使用时，用observer接收 用inject注入需要的数据 ：

import React, { Component } from 'react'
import {observer,inject} from "mobx-react"
@inject("store")
@observer
 class demo extends Component {
    constructor(props){
        super(props)
        console.log(this.props)
    }
    render() {
        return (
            <div>
                我是demo
                <button onClick={()=>{
                    this.props.store.Reduce();
                }}>减</button>
                默认的数量为{this.props.store.num}
                <button onClick={
                    ()=>{
                        this.props.store.Add()
                        }
                }>加</button>
            </div>
        )
    }
}
export defalut demo