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

Question

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

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

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

Answer 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 对象的集合。