有没有办法将动态 JSON 保存到 Mobx 状态树中？答案

【问题标题】：Is there a way to save dynamic JSON into Mobx State Tree?有没有办法将动态 JSON 保存到 Mobx 状态树中？
【发布时间】：2021-01-13 10:41:05
【问题描述】：

我之前使用过 Redux，将动态 JSON 保存到存储中非常容易。我在想，我们如何在 Mobx-State-Tree 中做同样的事情，而不实际定义模型结构。

.model({
    data:types.array(...)
)}

我在尝试，但我再次需要在其中定义 JSON 数组结构。

【问题讨论】：

标签： reactjs mobx mobx-react mobx-state-tree

【解决方案1】：

我需要这样做，因为我收到了一个定义明确的类型的对象，但该类型包含一个 config 字段，可以是任何 json。

我设法在 MST 中通过定义：

export const AnyJsonValue = types.union(
    types.string,
    types.number,
    types.integer,
    types.Date,
    types.boolean,
    types.map(types.late(() => JsonValue)),
    types.array(types.late(() => JsonValue)),
    types.undefined,
    types.null
);

然后像这样使用它：

export const MyObject = types.model("MyObject", {
        uuid: types.identifier,
        name: types.string,
        config: types.maybeNull(types.map(AnyJsonValue)),
        ...
});

如果您有一些限制，您仍然可以设置它们。例如，如果您希望 config 为 null 或嵌套任何 json 的字典（因此 config 不能是文字或数组，但可以是包含它们的字典），您可以使用以下类型： t.maybeNull(t.map(JsonValue)).

【讨论】：

【解决方案2】：

使用 mobx 状态树的整个想法是在您的应用程序中定义隐式数据类型。

但如果出于某种原因你想保存 JSON 而不定义是使用 JSON.stringify({...}) 将其转换为字符串

模型实际上是一个字符串

.model({
    data:types.string
)}

然后您可以使用操作将 JSON 保存到其中

.actions((self) => ({
   saveJSON(jsonData){
        self.data = JSON.stringify(jsonData)        
      }
})

然后，您可以在任何地方使用此 JSON，方法是使用视图调用带有 JSON.parse() 的 store.getJson 属性

   views((self) => ({
      get getJson(){
         return JSON.parse(self.data)
      }
    })

【讨论】：

我想这会起作用，但一定有更好的方法