Question

在Vue页面中，调用了mount（）事件时，我使用Ajax调用获取数据。该代码使用一个新的Pager对象重新创建了现有的Pager对象，该对象必须传入构造函数中的所有参数以对其进行重构。

如果我不这样做，则vm.Pager只是一个对象，没有某些所需的方法，并且无法传递它的prop类型检查。

        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); 
        });

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

在Vue（或javascript）中，有没有更好的方法可以在其中从Ajax映射类型而不必重新创建它呢？

Answer 1

您可以创建自己的映射器功能。

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)
          })      
        })

Answer 2

我发现我可以使用：

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

或

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

...而且两者似乎都正确更新了视图模型。不幸的是，当我使用这两种方法时，嵌套的ListPager控件（接收Pager对象）中的watch方法不会触发。

为使其正常工作，在查看本文档VueJs: Reactivity in Depth - Change Detection Caveats之后，我找到了以下解决方案。

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

这实际上创建了一个新的Pager，但似乎正确填充了它并保留了Vue反应性。希望如果需要，可以扩展到更详细的解决方案。

VueJs Ajax数据映射

2 个答案: