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-typespropTypes 使用与 mobx-react 一致。 注意点:如果要在store内部调用自己的方法,在触发事件的时候,一定要传入this. // 错误的写法 const { increment } = this.props.counterStore; increment(); // 正确的写法 const { counterStore } = this.props; counterStore.increment();参考:https://www.jianshu.com/p/6053a7fb2908 |
|
|