vue.js将getter和setter添加到后期绑定属性中

Question

这个话题与这个问题有关... map two 1D arrays into a 2D array and then fill with known values基本上我有三个对象集合：颜色，大小和产品。使用axios从api中获取数据，将它们填充到Vue主组件data（）中。该产品具有引用其中一个颜色对象和一个大小对象的属性。在上面的问题中，我问如何将产品扩展为二维颜色和大小的数组（并非所有组合都存在）。我的新问题是如何管理应用程序状态，直到我准备将数据持久化回数据存储区。

我正在使用以下代码将产品传播到网格中，这是主Vue组件上的一种方法

buildDimensions(){
/* build a new array, pulling the SKU out to be a key so that we can map them into the grid*/
    currentSKUs = this.style.skus.reduce((currentSKUs,sku) => currentSKUs.set(sku.sku,sku),new Map);
    result = this.style.colours.map(
        colourRow => this.style.sizes.map(
            sizeColumn => ({
                key: this.style.name.trim() + colourRow.colour_code.trim() + sizeColumn.size_code.trim(),
                value: currentSKUs.get(
                    this.style.name.trim() + colourRow.colour_code.trim() + sizeColumn.size_code.trim()
                    ) || {
                             colour_code: colourRow.colour_code.trim(),
                             size_code: sizeColumn.size_code.trim(),
                             lifecycle: "Not Created",
                             sku:this.style.name.trim() + colourRow.colour_code.trim() + sizeColumn.size_code.trim(),
                             selected:false
                         }
                        })
                    )
                );
    this.matrix = [];
    this.matrix.push(result);
},

所以我要做的是：如果产品不存在，那么创建一个属性为selected的新对象：false（注意：selected不是this.style.skus []上的属性，但所有其他字段都是）。这就像在所有网格单元中都有一个对象一样。问题是我有一些函数允许你将'selected'属性设置为true或false，如果它不存在则创建它并相应地更新UI。对于我创建的SKU不存在的记录，这是完美的。对于现有SKU，正在设置属性，但UI未更新。我已经追溯到这样一个事实，即后期添加的属性不存在getter和setter。

如何以正确创建getter和setter的方式添加属性。我无法修改API，因为selected是UI状态属性而不是数据的持久属性。我试过了

Vue.set(sku,selected,false) 

和

sku = Object.assign({}, sku,{selected:false}) 

在将api结果保存到数据对象之前迭代api结果时，这似乎也没有用。

任何帮助或建议将非常感谢。对于它的价值，我不需要this.style.skus中对象的selected属性，只需要在currentSKUs []或网格中的sku对象上，因为这些仅用于UI控件。

Answer 1

我已经解决了这样的问题：我不确定这是正确的方法，但它适用于我的目的。我拦截了API结果集并通过res.data迭代，将所选的：false注入每条记录。

.then((res) => {
         for(sku of res.data){
             sku = Object.assign(sku, {selected:false});
         }
         app.style.skus = res.data;
      }
)

这个问题是所选属性存在于数据对象上，但我不需要从那里引用它，只需要从我的（大）子组件引用它，因为数据集合只是潜在记录的一个子集，但是这可能会帮助别人。

为清楚起见，在将记录写入Vue应用程序中的data（）之前，必须注入其他属性，因为它会在添加对象时遍历对象以生成getter和setter。改变属性将触发事件观察者。如果在创建后添加属性，则不会创建getter和setter，并且会失去反应性。