时间戳

首页 > 解决方案 > 使用 VueJs 的相似对象是不同的

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

问题描述

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

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

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

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

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

标签： javascriptvuejs2

解决方案

这不是 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);
    }
})

推荐阅读