mobx项目创建 + mobx项目流程代码

一. 安装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 数据会同步更新