将 JSON 响应映射到 Vue.js 中的模型类

Posted 2023-02-22

【中文标题】将 JSON 响应映射到 Vue.js 中的模型类

【英文标题】：Mapping JSON responses to model classes in Vue.js

【发布时间】：2018-02-06 16:13:32

【问题描述】：

在将 JSON API 响应映射到“真实”javascript 模型对象时，是否有 Vue.js 的最佳实践或事实上的库？来自 ios 开发，有像 JSONModel 和 MagicalRecord 这样的优秀库来处理这个问题。

我能找到的大多数 Vue.js 教程/示例似乎都适用于纯 JSON 响应。恕我直言，这很快就会变得很麻烦。例如，在处理像日期字符串这样的原始数据时，最好作为真正的 Date 对象。所以它涉及某种（反）序列化功能。此外，最好有 Foo.findAll()、Foo.findById(1) 或 foo.save() 之类的东西来创建对后端服务的适当调用。

我发现vue-model 看起来很有希望，但似乎没有太大的吸引力。这让我想知道，如果将 JSON 映射到对象不是很多人在他们的 SPA 中做的事情吗？ 有哪些替代方法？

【问题讨论】：

我正在努力解决同样的问题。我找到了模型的替代品——redux，见***.com/questions/38445006/…

【参考方案1】：

这并不是一种普遍的做法。在基于浏览器的 SPA 中使用 JSON 的美妙之处在于解析的 JSON 是 javascript。您不必将值映射到类型化的类中。

也就是说，我理解你的意思，并且在某些时候我已经构建了一个 javascript 类，它的构造函数接受一个 javascript 对象作为“初始化程序”。然后在 API 响应中，您只需映射响应以将原始对象转换为具有方法、日期属性等的“类”实例。

假设我有一个 Animal javascript 类。

class Animal 
  constructor(initializer)
    this.name = initializer.name
    this.born = new Date(initializer.born)
  

  sayMyName()
    console.log(this.name)
  

在 API 响应中，从响应中创建 Animal 实例非常简单。

getAnimals()
  .then(response => this.animals = response.data.map(a => new Animal(a)))

现在你在 Vue 中的动物数据属性有一个 Animal 对象的集合。

【讨论】：

我希望有一个交钥匙解决方案，而不必手动编写各种重复的样板。此外，您的解决方案仅解决（反）序列化问题。我仍然需要手动与服务器后端对话以获取、更新、保存等资源。但是感谢您让我知道这或多或少是最佳实践！ :)

sayMyName 方法将无法使用，因为 vue 仅适用于受宠若惊的对象

@AlekseyRazbakov 除了事实。 codepen.io/Kradek/pen/ZXRYvG?editors=1010

使用构造方法可行，但 Vue 会给出类似 '[Vue warn]: Error in render: "TypeError: instance.SayMyName is not a function"'的警告

@PaulVerschoor 在答案的例子中，我没有看到这种行为。但我确实注意到您的评论大写 SayMyName 并且示例代码将其作为小写 sayMyName。