使用VueJ的相似对象不同

时间:2018-11-15 11:07:54

标签: javascript vuejs2

我正在Vuex商店中使用以下getter从我的州获取数据集。

getDatasets: state => {
    let datasets = [];
    state.observations.forEach(obs => {
      if (!datasets.includes(obs.dataset)) {
        datasets.push(obs.dataset);
      }
    })
    return datasets;
  }

但是,它返回的数据集数量与我状态下的观察结果数量相同,而应该仅返回一个数据集。

我相信这是由于VueJs添加的__obs__字段对于每个数据集对象而言都是不同的。

我误解了什么,如何解决?

1 个答案:

答案 0 :(得分:1)

这不是vuex / vue的问题。通过检查datasets.includes(obs.dataset)),实际上就是在检查datasets是否包含与obs.dataset具有相同引用的任何对象,这是不可避免的。

可以在浏览器控制台中运行一个非常简单的示例来复制您的逻辑:

var state = { observations: [ { dataset: {}}, { dataset: {}} ]}
var datasets = []
state.observations.forEach(function(obs) {
    if (!datasets.includes(obs.dataset)) {
        datasets.push(obs.dataset);
    }
})
console.log(datasets.length) // 2, not 1
console.log(datasets[0] === state.observations[0].dataset) // true, same reference
console.log(datasets[0] === state.observations[1].dataset) // false

如果要获取数据集的唯一值,请尝试比较分析的对象字符串:

state.observations.forEach(obs => {
    if (!datasets.some(
        elem => SON.stringify(elem) === JSON.stringify(obs.dataset))
    ) {
        datasets.push(obs.dataset);
    }
})