Javascript VueJs Ajax数据映射

在Vue页面中，当mounted（）事件被触发时，我有一个使用Ajax获取数据的调用。代码使用一个新的Pager对象重新创建现有的Pager，它必须在构造函数中传入所有参数来重建它

如果我不这样做，vm.Pager只是一个对象，没有一些需要的方法，并且无法通过它传递给的属性类型检查

        axios.post("/Home/GetList", vm.Pager)
        .then(function (result)
        {
           var p = result.data.Pager;
           vm.Pager = new Pager(p.PageSize, p.CurrentRecord, p.TotalCount);
           // etc. (Pager has additional fields...)
           vm.ItemList = result.data.ListItems;        
        })
        .catch(function (error)
        {
            alert(error); 
        });

在knockoutjs中，有一个映射函数，您可以告诉它映射什么类型，而无需重新创建对象。这很方便，特别是对于更复杂或嵌套的Ajax数据

---

在Vue（或javascript）中，有没有更好的方法可以做到这一点，它可以从Ajax映射类型，而无需重新创建类型

您可以制作自己的映射器函数

methods: {
  mapTypesToData (responseData, map) {
     responseData.forEach((item, key) => {
       let mapperVal = map[key]
       if (typeof mapperVal === 'string') {
         this.$set(this, map[key], item)
       } else if (typeof mapperVal === 'function') {
         this.$set(this, key, map[key](item))
       }
     })
  }
}

然后在ajax请求中

        axios.post("/Home/GetList", vm.Pager)
        .then(function (result)
        {
          this.mapTypesToData(result.data, {
            ItemList: 'ListItems',
            Pager: (p) => new Pager(p.PageSize, p.CurrentRecord, p.TotalCount)
          })      
        })

---

我发现我可以使用：

Object.assign(vm.Pager, result.data.Pager);

或

…而且两者似乎都正确地更新了viewmodel。不幸的是，当我使用这两种方法中的任何一种时，嵌套ListPager控件（接收Pager对象）中的watch方法都不会启动

为了实现这一点，在阅读了本文档之后，我找到了下面的解决方案

---

这实际上创建了一个新的寻呼机，但似乎正确地填充了它，并保留了Vue的反应性。如果需要的话，希望这将扩展到更复杂的解决方案。

分页器构造函数是什么样子的？它是对数据进行任何转换还是直接分配属性？这只是一个简单的分配。上面的寻呼机示例是一个简单的示例，其中创建一个有效的构造函数相当容易。我要寻找的是一种用于更复杂对象图的策略（插件、技术等），理想情况下，您不必创建自定义构造函数。

// import _ from 'lodash'
_.merge(vm.Pager, result.data.Pager);

 vm.Pager = Object.assign(new Pager(), vm.Pager, result.data.Pager);