Mobx 是一种状态管理方案。不同于 redux 将状态定义为不可变状态，mobx 会自动收集依赖，以可变状态的方式直接修改原始状态，这点与 Vue 的状态管理很像。
在 es6 环境下，可以直接使用装饰器定义状态及方法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| import { observable } from "mobx";
class CounterStore {
@observable count = 0;
@action
increase() {
this.count++;
}
@action
decrease() {
this.count--;
}
}
export default new CounterStore();
|
@action 用来定义状态修改方法，@observable 用来定义可观察对象。
在 react 中可使用 mobx-react 提供的 Provider 组件装载 store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| import React, { Component } from 'react';
import { Provider, observer, inject } from 'mobx-react';
import ReactDOM from 'react-dom';
import store from './counter-store';
@inject('store')
@observer
class Counter extends Component {
render() {
return (
<div>
自动响应 @action 对状态的变更：{this.props.store.count}
<div>
<button onClick={() => this.props.store.increase()}>+</button>
<button onClick={() => this.props.store.decrease()}>-</button>
</div>
</div>
)
}
}
ReactDOM.render(
<Provider store={store}>
<Counter />
</Provider>,
document.getElementById('mount')
);
|
@inject 用于将 Provider 传入的 props 注入到组件中。这里可将 store 注入到 Provider 的子组件中，当然也支持多个 store 同时注入。
