Mobx 状态树中的通用模型?

Question

我将有多个具有不同"规格"的"产品"

例子

产品

• 相机
• 笔记本

相机规格

• 数码相机百万像素
• 品牌
• 光学变焦

笔记本电脑

• 品牌
• 柱塞尺寸
• 操作系统
• 中央处理器内核数
• 显示尺寸
• 硬盘大小

我将有 2 个组件

1. 过滤器组件
2. 搜索结果

筛选器组件将是该产品的所有可用筛选器的列表。

搜索结果将是用户过滤结果时返回的结果，并将向他们显示找到的每个产品的一些规格。

我正在使用 Mbox 状态树，我不知道如何存储从服务器返回的"产品"，因为每个产品都有不同的属性。

我可以猜也许为每种类型制作一个模型

.model({
id: types.identifierNumber,
Brand: types.string,
OpticalZoom: types.string,
MegaPixels: types.string,
})
.model({
id: types.identifierNumber,
Brand: types.string,
RamSize: types.string,
Os: types.string,
Cores: types.string,
Display: types.string,
HarddriveSize: types.string,
})

但是现在我不知道如何在我的组件中访问 2 个不同的模型，因为它会绑定到这些模型。

我可以制作 1 个巨大的模型，但我对这个想法并不疯狂，因为许多属性不会被使用。

我必须考虑的另一件事是，用户可以单击其中一个结果，该结果将转到另一个页面并显示所有详细信息。我可能会使用 MST 引用来访问它，如果我制作所有单独的模型，我将无法做什么。

任何建议，对我来说，我认为我需要更多的 json 或更动态的东西，所以我不确定 MST 是否是正确的解决方案，但我不是这方面的专家，所以我想看看它是否可以使用。

Answer 1

对每种类型使用types.union(Camera, Laptop). 类别(或类型(类型键。然后使用视图获取特定类型。

const Camera = model({
type: literal('camera')
});
const Laptop = model({
type: literal('laptop')
});
const Data = model({
products: array(union(Camera, Laptop))
})
.views( self => ({
get cameras() {
return self.products.filter( p => p.type === 'camera');
},
get laptops() {
return self.products.filter( p => p.type === 'laptop');
}
}))