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