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
的典型用法是用来展示实体列表。因为它是响应式的,任何对 items
和 status
的修改都会触发 @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>
)
}
}