MobX 为复杂项目中状态管理提供了一种简单高效的机制；Taro 提供了 @tarojs/mobx 来让开发人员在使用 MobX 的过程中获得更加良好的开发体验。
$ yarn add mobx@4.8.0 @tarojs/mobx @tarojs/mobx-h5 @tarojs/mobx-rn
# 或者使用 npm
$ npm install --save mobx@4.8.0 @tarojs/mobx @tarojs/mobx-h5 @tarojs/mobx-rn
在项目 src 目录下新增一个 store/counter.js 文件
// src/store/counter.js
import { observable } from 'mobx'
const counterStore = observable({
counter: 0,
counterStore() {
this.counter++
},
increment() {
this.counter++
},
decrement() {
this.counter--
},
incrementAsync() {
setTimeout(() => {
this.counter++
}, 1000)
}
})
export default counterStore
import {observable, action} from 'mobx';
import Taro from '@tarojs/taro';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
class UnitListData {
constructor() {
}
@observable currentTab = 0;
@action
changeParams = (target, value) => {
this[target] = value
};
}
const unitListData = new UnitListData();
export {unitListData};
在项目入口文件 app.js 中使用 @tarojs/mobx 中提供的 Provider 组件将前面写好的 store 接入应用中
// src/app.js
import Taro, { Component } from '@tarojs/taro'
import { Provider } from '@tarojs/mobx'
import Index from './pages/index'
import counterStore from './store/counter'
import './app.scss'
const store = {
counterStore
}
class App extends Component {
config = {
pages: [
'pages/index/index'
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
}
componentDidMount () {}
componentDidShow () {}
componentDidHide () {}
componentDidCatchError () {}
render () {
return (
<Provider store={store}>
<Index />
</Provider>
)
}
}
Taro.render(<App />, document.getElementById('app'))
在页面中可通过 @tarojs/mobx 提供的 inject 以及 observer 方法将 mobx 与我们的页面进行关联
// src/pages/index/index.js
import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'
import './index.scss'
@inject('counterStore')
@observer
class Index extends Component {
config = {
navigationBarTitleText: '首页'
}
componentWillMount () { }
componentWillReact () {
console.log('componentWillRect')
}
componentDidMount () { }
componentWillUnmount () { }
componentDidShow () { }
componentDidHide () { }
increment = () => {
const { counterStore } = this.props
counterStore.increment()
}
decrement = () => {
const { counterStore } = this.props
counterStore.decrement()
}
incrementAsync = () => {
const { counterStore } = this.props
counterStore.incrementAsync()
}
render () {
const { counterStore: { counter } } = this.props
return (
<View className='index'>
<Button onClick={this.increment}>+</Button>
<Button onClick={this.decrement}>-</Button>
<Button onClick={this.incrementAsync}>Add Async</Button>
<Text>{counter}</Text>
</View>
)
}
}
export default Index
上例中 Provider、inject、 observer 的使用方式基本上与 mobx-react 保持了一致，但也有以下几点需要注意：
Provider 不支持嵌套，即全局只能存在一个 Provider
在 mobx-react 中，可通过以下方式设置 store：
<provider store1="{xxxx}" store2="{xxxx}">
<xxx> </xxx>
</provider>
而在 @tarojs/mobx 中，我们需要使用以下方式设置：
const store = {
store1: xxxx,
store2: xxxx
}
<provider store="{store}">
<xxx> </xxx>
</provider>
inject、 observer 不能在 stateless 组件上使用。
observer 不支持任何参数。
按照以下方式使用 inject 时，不能省略 observer 的显式调用：
@inject((stores, props) => ({
counterStore: stores.counterStore
}))
@observer //这个不能省略
在 Component 的 render 方法中，如果需要使用一个 observable 对象（该例中为 counter），需要：
const { counterStore: { counter } } = this.props
return (
<text>{counter}</text>
)
而非：
const { counterStore } = this.props
return (
<text>{counterStore.counter}</text>
)
如果使用 @observable 装饰器来定义可观察对象时，请确保该属性已经初始化（这是很多情况下属性值改变，页面没刷新的根源所在），比如：
@observable counter // 错误
@observable counter = 0 // 正确
自 1.2.0-beta.5 后，propTypes 已从 taro-mobx、taro-mobx-h5、taro-mobx-rn 中剥离，如需使用，请单独进行安装：
$ yarn add @tarojs/mobx-prop-types
# 或者使用 npm
$ npm install --save @tarojs/mobx-prop-types
propTypes 使用与 mobx-react 一致。
注意点：如果要在store内部调用自己的方法，在触发事件的时候，一定要传入this.
// 错误的写法
const { increment } = this.props.counterStore;
increment();
// 正确的写法
const { counterStore } = this.props;
counterStore.increment();
