自 1.2.0-beta.1 开始支持

    MobX 为复杂项目中状态管理提供了一种简单高效的机制；Taro 提供了 @tarojs/mobx 来让开发人员在使用 MobX 的过程中获得更加良好的开发体验。

    下文中示例代码均在 taro-mobx-sample

    首先请安装 mobx@4.8.0 、 @tarojs/mobx 、 @tarojs/mobx-h5 和 @tarojs/mobx-rn

    1. $ yarn add mobx@4.8.0 @tarojs/mobx @tarojs/mobx-h5 @tarojs/mobx-rn
    2. # 或者使用 npm
    3. $ npm install --save mobx@4.8.0 @tarojs/mobx @tarojs/mobx-h5 @tarojs/mobx-rn

    随后可以在项目 src 目录下新增一个 store/counter.js 文件

    1. // src/store/counter.js
    2. import { observable } from 'mobx'
    4. const counterStore = observable({
    5.   counter: 0,
    6.   counterStore() {
    7.     this.counter++
    8.   },
    9.   increment() {
    10.     this.counter++
    11.   },
    12.   decrement() {
    13.     this.counter--
    14.   },
    15.   incrementAsync() {
    16.     setTimeout(() => {
    17.       this.counter++
    18.     }, 1000)
    19.   }
    20. })
    22. export default counterStore

    接下来在项目入口文件 app.js 中使用 @tarojs/mobx 中提供的 Provider 组件将前面写好的 store 接入应用中

    1. // src/app.js
    2. import Taro, { Component } from '@tarojs/taro'
    3. import { Provider, onError } from '@tarojs/mobx'
    4. import Index from './pages/index'
    6. import counterStore from './store/counter'
    8. import './app.scss'
    10. const store = {
    11.   counterStore
    12. }
    14. onError(error => {
    15.   console.log('mobx global error listener:', error)
    16. })
    18. class App extends Component {
    20.   config = {
    21.     pages: [
    22.       'pages/index/index'
    23.     ],
    24.     window: {
    25.       backgroundTextStyle: 'light',
    26.       navigationBarBackgroundColor: '#fff',
    27.       navigationBarTitleText: 'WeChat',
    28.       navigationBarTextStyle: 'black'
    29.     }
    30.   }
    32.   componentDidMount () {}
    34.   componentDidShow () {}
    36.   componentDidHide () {}
    38.   componentDidCatchError () {}
    40.   render () {
    41.     return (
    42.       <Provider store={store}>
    43.         <Index />
    44.       </Provider>
    45.     )
    46.   }
    47. }
    49. Taro.render(<App />, document.getElementById('app'))

    然后，我们在页面中可通过 @tarojs/mobx 提供的 inject 以及 observer 方法将 mobx 与我们的页面进行关联

    1. // src/pages/index/index.js
    2. import Taro, { Component } from '@tarojs/taro'
    3. import { View, Button, Text } from '@tarojs/components'
    4. import { observer, inject } from '@tarojs/mobx'
    6. import './index.scss'
    8. @inject('counterStore')
    9. @observer
    10. class Index extends Component {
    12.   config = {
    13.     navigationBarTitleText: '首页'
    14.   }
    16.   componentWillMount () {
    17.     console.log('componentWillMount')
    18.   }
    20.   /**
    21.    * 该方法将在 observable 对象更新时触发
    22.    */
    23.   componentWillReact () {
    24.     console.log('componentWillReact')
    25.   }
    27.   componentDidMount () {
    28.     console.log('componentDidMount')
    29.   }
    31.   componentWillUnmount () {
    32.     console.log('componentWillUnmount')
    33.   }
    35.   componentDidShow () {
    36.     console.log('componentDidShow')
    37.   }
    39.   componentDidHide () {
    40.     console.log('componentDidHide')
    41.   }
    43.   increment = () => {
    44.     const { counterStore } = this.props
    45.     counterStore.increment()
    46.   }
    48.   decrement = () => {
    49.     const { counterStore } = this.props
    50.     counterStore.decrement()
    51.   }
    53.   incrementAsync = () => {
    54.     const { counterStore } = this.props
    55.     counterStore.incrementAsync()
    56.   }
    58.   render () {
    59.     const { counterStore: { counter } } = this.props
    60.     return (
    61.       <View className='index'>
    62.         <Button onClick={this.increment}>+</Button>
    63.         <Button onClick={this.decrement}>-</Button>
    64.         <Button onClick={this.incrementAsync}>Add Async</Button>
    65.         <Text>{counter}</Text>
    66.       </View>
    67.     )
    68.   }
    69. }
    71. export default Index

    上例中 Provider、inject、 observer、onError 的使用方式基本上与 mobx-react 保持了一致，但也有以下几点需要注意：

    • Provider 不支持嵌套，即全局只能存在一个 Provider

    • 在 mobx-react 中，可通过以下方式设置 store：

    1. <Provider store1={xxxx} store2={xxxx}>
    2.   <XXX />
    3. </Provider>

    而在 @tarojs/mobx 中，我们需要使用以下方式设置：

    1. const store = {
    2.   store1: xxxx,
    3.   store2: xxxx
    4. }
    5. <Provider store={store}>
    6.   <XXX />
    7. </Provider>

    • inject、 observer 不能在 stateless 组件上使用

    • observer 不支持任何参数

    • 按照以下方式使用 inject 时，不能省略 observer 的显式调用：

    1. @inject((stores, props) => ({
    2.   counterStore: stores.counterStore
    3. }))
    4. @observer //这个不能省略

    注意事项：

    • 在 Component 的 render 方法中，如果需要使用一个 observable 对象（该例中为 counter），您需要：
    1. const { counterStore: { counter } } = this.props
    2. return (
    3.   <Text>{counter}</Text>
    4. )

    而非：

    1. const { counterStore } = this.props
    2. return (
    3.   <Text>{counterStore.counter}</Text>
    4. )
    • 如果使用 @observable 装饰器来定义可观察对象时，请确保该属性已经初始化（这是很多情况下属性值改变，页面没刷新的根源所在），比如：
    1. @observable counter // 错误
    2. @observable counter = 0 // 正确
    • 自 1.2.0-beta.5 后，propTypes 已从 taro-mobx、taro-mobx-h5、taro-mobx-rn 中剥离，如需使用，请单独进行安装：
    1. $ yarn add @tarojs/mobx-prop-types
    2. # 或者使用 npm
    3. $ npm install --save @tarojs/mobx-prop-types

    propTypes 使用与 mobx-react 一致

    注：自 1.2.27-beta.0 后，@tarojs/mobx-prop-types 已被移除，请使用 mobx-react 替代。