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

Question

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

我能找到的大多数 Vue.js 教程/示例似乎都适用于纯 JSON 响应。恕我直言，这很快就会变得很麻烦。例如，在处理像日期字符串这样的原始数据时，最好将其作为真正的日期对象。因此它涉及某种（反）序列化功能。另外，最好有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 对象的集合。