mobx 单应用实践

mobx在SPA应用

1. 安装依赖：

npm install -s mobx mobx-react @babel/plugin-proposal-decorators

2. 修改package.json(支持类):

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

3.目录结构

├─page
├─ Home.jsx
└─ One.jsx
├─router
├─ Routes.jsx
├─store
├─ index.js
├─ homeStore.js
└─ oneStore.js
└─App.jsx

4.页面数据

APP.jsx 顶级注入stores

import React from 'react';
import {Provider, observer} from "mobx-react";
import {configure} from "mobx";
import stores from "./store";
import Routes from "./router/Routes";

@observer
class App extends React.Component {
    render() {
        return (
            <Provider {...stores}>
                <Routes></Routes>
            </Provider>
        );
    }
}

//5.x版本严格模式开启方式,不允许直接改变store的值，必须通过action改变
configure({
    enforceActions: "observed"
});
export default App;

stores 数据储存,页面展示优化，合并如以下

//HomeStore.js
import {action, observable} from "mobx";

class HomeStore {
    @observable homeNum = 0;
    @action setHomeNum(val) {
        this.homeNum = val;
    }
    @action addNum() {
        this.homeNum += 1;
    }
    @action lessNum() {
        this.homeNum -= 1;
    }
}

export default HomeStore;


// oneStore.js
import { observable} from "mobx";
class OneStore {
    @observable oneNum = 1;
}
export default OneStore;

// index.js
import OneStore from "./oneStore";
import HomeStore from "./homeStore";

let oneStore = new OneStore();
let homeStore = new HomeStore();

const stores = {
    oneStore,
    homeStore
};
/// 合并导出stores
export default stores;

router路由配置，这里简单介绍一下

import React from "react";
import { BrowserRouter,Route,Link,Switch } from "react-router-dom";
import Home from '../page/Home';
import One from '../page/One';
import {observer} from "mobx-react";

@observer
class Routes extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <ul>
                    <li><Link to='/'>Home</Link></li>
                    <li><Link to='/one'>One</Link></li>
                </ul>
                <Switch>
                    <Route exact path={`/`} component={Home} ></Route>
                    <Route path={`/one`} component={One} />
                </Switch>

            </BrowserRouter>
        );
    }
}
export default Routes;

page页面: Home.jsx

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

// 类方式写法
// @inject("homeStore")
// @observer
// class Home extends React.Component {
//     constructor(props) {
//         super(props);
//         this.state = {};
//     }
//
//     render() {
//         return (
//             <div>
//                 <h2>Home 页面</h2>
//                 <h3>首页数据源的number为:{props.homeStore.homeNum}</h3>
//                 <button onClick={() => {props.homeStore.addNum()}} >
//                     点击+1
//                 </button>
//                 <button  onClick={() => {props.homeStore.lessNum()}}>
//                     点击-1
//                 </button>
//                 <button  onClick={() => {props.homeStore.setHomeNum(33);;}}>
//                     homeNum33
//                 </button>
//             </div>
//         );
//     }
// }

// 函数式写法，建议使用
const Home = inject('homeStore')(observer((props)=>{
    return (<div>
            <h2>Home 页面</h2>
            <h3>首页数据源的number为:{props.homeStore.homeNum}</h3>
            <button onClick={() => {props.homeStore.addNum()}} >
                点击+1
            </button>
            <button  onClick={() => {props.homeStore.lessNum()}}>
                点击-1
            </button>
            <button  onClick={() => {props.homeStore.setHomeNum(33);;}}>
                homeNum33
            </button>
        </div>)
}))

export default Home;

Ons.jsx

import React, { Component } from "react";
import { observer, inject } from "mobx-react";
// 引入多个store写法
// @inject("homeStore")
// @inject("oneStore")
// @observer
// class One extends Component {
//     constructor(props) {
//         super(props);
//         this.state = {};
//     }
//     render() {
//         return (
//             <div>
//                 <h2>one 页面</h2>
//                 <h3>首页数据源的number为:{this.props.homeStore.homeNum}</h1>
//                 <h3>oneStore的number为:{this.props.oneStore.oneNum}</h1>
//             </div>
//         );
//     }
// }

// 引入多个store写法
const One  = inject('oneStore','homeStore')(observer((props)=>{
    return (
        <div>
            <h2>one 页面</h2>
            <h3>首页数据源的number为:{props.homeStore.homeNum}</h3>
            <h3>oneStore的number为:{props.oneStore.oneNum}</h3>
        </div>
    )
}))

export default One