一. 安装mobx

1. react 安装并 reject抽离配置

    1. 全局安装 create-react-app  这个脚手架

        npm/cnpm i create-react-app -g

        yarn add create-react-app global

    2. 创建项目

        create-react-app project //自定义的名称不能是project 或 .

    3. cd project

    4. 进行配置文件抽离（要使用默认的yarn命令）

        yarn eject

2. mobx配置（配置装饰器）

a. 安装mobx,mobx-react

    cnpm i mobx mobx-react -D

    注意：如果git冲突

        git add .  //原操作先放到本地暂存盘

        git commit -m "a"

        不要git push

   注意：如果git冲突的解决方法

       git add .  //原操作先放到本地暂存盘

       git commit -m "a"

       //不要git push

b. 配置装饰器（es6修饰器）

   cnpm install  babel-plugin-transform-decorators-legacy   -D

   //装饰器的检测

   cnpm i @babel/plugin-proposal-decorators -D

   //es6,es7语法检测

   cnpm i @babel/preset-env -D

   cnpm i babel-plugin-transform-class-properties -D

c. 配置package.json

package.json中的babel配置如下

    "babel": {

        "plugins": [

            [

            "@babel/plugin-proposal-decorators",

            {

                "legacy": true

            }

            ],

            "transform-class-properties"

        ],

        "presets": [

            "react-app",

            "@babel/preset-env"

        ]

    },

二、mobx项目流程

码云源码：mobx项目

项目目录：



1. 数据仓库store中 store.js

//接收的是实例

import home from  "./home"

import car from "./car"

const store = {

    home,

    car

}

export default store

2. store中的数据分片（数据包）car.js

fetch数据请求可以直接写在类中，而不用像redux一样配置redux-thunk

import {

    observable,computed,action

} from "mobx"

class Car {

    @observable //观察数据name，响应observer

        age = 1

    @computed //当age发生改变是，触发函数

        get douleAge(){

        	//此this值得是class类的实例

            return this.age + 2

        }

    @action //用户操作,action唯一可以更改state。数据请求直接在action中书写

        add(){

            //数据更改

            this.props.store.car.age ++

            //数据请求

            fetch("/data/data.json")

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

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

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

                )

        }

}

export default new Car();

3. store中的数据分片 --home.js

import {

    observable,computed,action

} from "mobx"

class Home {

    @observable

        name = "ja"

    @computed

        get otherName(){

            return this.name + "good"

        }

    @action

        add(){

            console.log("add",this)

            this.props.store.home.name = "newa"

        }

}

const home = new Home()

export default home;

4. index.js -根目录注册store，全局组件都可以访问到仓库store

全局组件绑定store，共享store

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import store from "./store"

import {Provider} from "mobx-react"

ReactDOM.render(

<Provider store={store}>

    <App />

</Provider>,

document.getElementById('root'));

5.组件中注入store数据， 原则：谁使用谁注入inject

import React, { Component } from 'react';

//inject注入：store数据/依赖 注入到组件

import {inject,observer} from "mobx-react"

@inject("store")

 //响应observable,state值变化，视图中的observable 及computed数据会同步变化

@observer

class App extends Component {

    render() {

    let {store} = this.props

    console.log(this)

    return (

        <div className="App">

        home数据： {store.home.name}

        <hr/>

        home-computed后数据： {store.home.otherName}

        <hr/>

        <button onClick={store.home.add.bind(this)}>更改home数据</button>

        <hr/>

        car数据： {store.car.age}

        <hr/>

        car-computed后数据： {store.car.douleAge}

        <hr/>

        <button onClick={store.car.add.bind(this)}>更改car数据</button>

        </div>

    );

    }

}

export default App;

效果图

当触发action中动作时，@observable以及 @computed 数据会同步更新