mobx4 使用

[981377660LMT]

// !注意不要只用@observable装饰器的写法, 还要用 extendObservable.
import { action, computed, extendObservable, observable } from 'mobx';

/**
 * 维护筛选栏中筛选、分组、排序Dropdown面板的显示状态.
 */
export class FilterAreaStore {
  // TODO: 换成id
  @observable private _visibleFilterPanelPath = -1;
  @observable private _groupPanelVisible = false;
  @observable private _sortPanelVisible = false;
  constructor () {
    extendObservable(this, {
      _visibleFilterPanelPath: -1,
      _groupPanelVisible: false,
      _sortPanelVisible: false
    });
  }
  setVisibleFilterPanel = action((path: number): void => {
    this._visibleFilterPanelPath = path;
  });
  clearVisibleFilterPanel = action((): void => {
    this._visibleFilterPanelPath = -1;
  });
  toggleVisibleFilterPanel = action((path: number): void => {
    if (this._visibleFilterPanelPath !== path) {
      this._visibleFilterPanelPath = path;
    } else if (this._visibleFilterPanelPath === path) {
      this._visibleFilterPanelPath = -1;
    }
  });
  getVisibleFilterPanelVisible = (): number => {
    return this._visibleFilterPanelPath;
  };
  setGroupPanelVisible = action((visible: boolean): void => {
    this._groupPanelVisible = visible;
  });
  getGroupPanelVisible = (): boolean => {
    return this._groupPanelVisible;
  };
  setSortPanelVisible = action((visible: boolean): void => {
    this._sortPanelVisible = visible;
  });
  getSortPanelVisible = (): boolean => {
    return this._sortPanelVisible;
  };
}

[981377660LMT]

1. 使用@observable 声明属性，构造函数中再 extendObservable 绑到 store 的原型链上。
2. 使用箭头函数把方法绑定在实例上，因为你不知道外界是怎么调用这个函数的，保险起见。
3. 在 react 组件中一定要 用 mobx-react 中的 observer 包裹组件。