@mtfe/wets-mobx

在小程序中使用Mobx

提供了5个接口: Provider、inject、observer、route、autorun，其中route用于在store中结合action方便的发送HTTP请求，详情请见下面的getTopicList 方法，测试代码在test文件夹下面

# 安装Redux支持包
$ yarn add --dev @mtfe/wets-mobx mobx

# 创建redux的modules目录
$ mkdir -p src/stores

创建 src/stores/index.ts 文件

import { useStrict } from 'mobx';
import Test from './test';

useStrict(true);
const test = new Test();
const store = {
  test,
};

export default store;

创建 src/stores/test.ts 文件

import {
  observable,
  action,
  computed,
  runInAction,
  IObservableArray
} from 'mobx';
import { route } from '@mtfe/wets-mobx';

export type Topic = {
  title: string;
};

export default class Person {
  @observable random = Math.random();
  @observable topicList = [{
    title: '没有主题'
  }] as IObservableArray<Topic>;

  @computed
  get fullRandom() {
    return '帅帅的' + this.random;
  }  

  @action
  changeRandom() {
    this.random = Math.random();
  }

  @action
  @route('/api/v1/topics', 'GET')
  * getTopicList(tab: string) {
    const query = {
      page: 1,
      limit: 10,
      tab
    };
    const ret = yield query;
    const topicList: Topic[] = ret.data;
    runInAction(() =>
      this.topicList.replace(
        topicList.map(item => ({
          title: item.title
        }))
      )
    );
  }
}

修改 app.ts

import { App } from '@mtfe/wets';
import { Provider } from '@mtfe/wets-mobx';
import { route } from '@mtfe/wets-mobx';

import store from '../src/stores';

route.prototype.setUrlOption({
  protocol: 'https',
  host: 'cnodejs.org'
});

@App.Conf({
  window: {
    navigationBarBackgroundColor: '#fff',
    navigationBarTextStyle: 'black',
    backgroundColor: '#fff',
  },
})
@Provider({
  store,
})
export class MyApp extends App {
  store: any;
}

这样就配置完了，接下来就可以像在 React 中使用 mobx 一样了 创建 src/pages/test/index.tsx 文件

import { Page } from '@mtfe/wets';
import { inject, observer, autorun } from '@mtfe/wets-mobx';

import './test.page.css';
import TestStore from '../../stores/test';

interface IData {
  test: TestStore;
  fullRandom: string;
  tabIndex: number;
  tabArray: string[];
}

@Page.Conf({
  navigationBarTitleText: 'TestPage'
})
@inject('test')
@observer()
export class TestPage extends Page<any, IData> {
  onLoad() {
    console.log(this.data);
    this.setData({
      tabIndex: 0,
      tabArray: ['ask', 'share', 'job', 'good']
    });
    autorun(() =>
      this.setData({
        fullRandom: this.data.test.fullRandom
      })
    );
  }

  test() {
    this.data.test.changeRandom();
  }

  getTopicList() {
    this.data.test.getTopicList(this.data.tabArray[this.data.tabIndex]);
  }

  bindPickerChange(e: any) {
    console.log('picker发送选择改变，携带值为', e.detail.value);
    this.setData({
      tabIndex: e.detail.value
    });
  }

  render() {
    return (
      <view className='test-page'>
        <text>{this.data.fullRandom}</text>
        <button bindtap={this.test}>changeRandom</button>
        <view className='section'>
          <view className='section__title'>tab选择器</view>
          <picker
            mode='selector'
            bindchange={this.bindPickerChange}
            value={this.data.tabIndex}
            range={this.data.tabArray}
          >
            <view className='picker'>
              当前选择: {this.data.tabArray[this.data.tabIndex]}
            </view>
          </picker>
        </view>
        <button bindtap={this.getTopicList}>get topic list</button>
        <view className='topicList'>
          {this.data.test.topicList.map((topic, index) => {
            return (
              <view key={index}>
                {index}: {topic.title}
              </view>
            );
          })}
        </view>
      </view>
    );
  }
}