DataCollectionStore

DataCollectionStore 是基于 MobX 的存储,可以用来获取实体集合。可以通过 collection initializer 函数创建:

dataCollection = collection<Pet>(Pet.NAME, {
    view: 'pet-with-owner-and-type',
    sort: 'identificationNumber',
    filter: {conditions: [{property: 'name', operator: "contains", value: 'Ro'}]},
    limit: 10,
    offset: 0,
    loadImmediately: true, // 默认为 true
  }
);

在一个功能组件中,需要将对 collection 的调用包装在 React.useRef 中,或者使用更方便的 hook:useCollection

const dataCollection = useCollection<Pet>(
  Pet.NAME,
  {
    view: 'pet-with-owner-and-type',
    sort: 'identificationNumber',
    filter: {conditions: [{property: 'name', operator: "contains", value: 'Ro'}]},
    limit: 10,
    offset: 0,
    loadImmediately: true, // 默认为 true
  }
);

// 注意,此时 `dataCollection` 是 React 的 `MutableRefObject`。
// `DataCollectionStore` 包含在其 `current` 属性中。
dataCollection.current.delete(e);

如果提供了 stringIdName 参数,DataCollectionStore 会将实体视为具有字符串 ID 的实体:

dataCollection = collection<Pet>(Pet.NAME, {
    stringIdName: 'identifier'
  }
);

DataCollectionStore 的典型用法是用来展示实体列表。因为它是响应式的,任何对 itemsstatus 的修改都会触发 @observer 组件的重新渲染:

@observer
class CarList extends React.Component {
  carsData = collection<Car>(Car.NAME, {view: 'car-view', sort: '-updateTs'});
  render() {
    if (this.carsData.status === "LOADING") return 'Loading...';
    return (
      <ul>
        {this.carsData.items.map(car =>
           <li>{car._instanceName}</li>
        )}
      </ul>
    )
  }
}