关注本文作者公众号
获取最新福利
微信公众号

Taro中使用Mobx

时间: 04/08/2019作者: ll浏览量: 3609

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

$ 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

接下来在项目入口文件 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

上例中 Providerinjectobserver 的使用方式基本上与 mobx-react 保持了一致,但也有以下几点需要注意:

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

  • mobx-react 中,可通过以下方式设置 store

    <Provider store1={xxxx} store2={xxxx}>
      <XXX />
    </Provider>
    

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

    const store = {
      store1: xxxx,
      store2: xxxx
    }
    <Provider store={store}>
      <XXX />
    </Provider>
    
  • injectobserver 不能在 stateless 组件上使用

  • observer 不支持任何参数

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

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

注意事项:

  • Componentrender 方法中,如果需要使用一个 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-mobxtaro-mobx-h5taro-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();
关注下面的标签,发现更多相似的文章

ll

前端工程师
微信公众号:极客教程(geekjc),极客教程网: https://www.geekjc.com 专注web前后端架构,带你走进全栈的世界。
极客教程网
——一个你值得来的网站
编程笔记:学习分享,与君共勉!
小书本:系统完整的学习!
在线工具:极客工具,在线工具,在线运行
前端导航:前端导航,前端资源聚合平台
零花钱:简单点点手机,做做任务赚点零花钱
微信公众号
极客教程(geekjc)
QQ群:
495489065

Copyright © 2019 - ~ All Rights Reserved. Made By ll 备案号:粤ICP备15001588号-4