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