javascript - 使用 VueJs 相似的对象是不同的

Question

我在 Vuex 存储中使用以下 getter 从我的状态获取数据集。

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

但是，这会返回与我所在州的观察结果一样多的数据集，而它应该只返回一个数据集。

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

我是否误解了什么？我该如何解决这个问题？

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