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

【问题标题】：vue.js adding getters and setters to late-bound propertiesvue.js 将 getter 和 setter 添加到后期绑定属性
【发布时间】：2019-03-07 17:28:53
【问题描述】：

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

我正在使用以下代码将产品分散到网格中，这是主 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[] 上的属性，而是所有其他领域是）。这在所有网格单元中都有一个对象。问题是我有一些函数允许您将“选定”属性设置为 true 或 false，如果它不存在则创建它并相应地更新 UI。对于我在不存在 SKU 的情况下创建的记录，这是完美的。对于现有 SKU，正在设置属性，但 UI 未更新。我已经追踪到，对于后期添加的属性，getter 和 setter 不存在。

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

Vue.set(sku,selected,false)

和

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

在将 api 结果保存到数据对象之前对其进行迭代时，但这似乎也不起作用。

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

【问题讨论】：

标签： javascript vue.js vuejs2 getter-setter

【解决方案1】：

我已经解决了这样的问题：我不确定这是正确的方法，但它适用于我的目的。我已经截获了 API 结果集，并通过 res.data 进行了迭代，将 selected: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，并且您将失去反应性。

【讨论】：