Подобные объекты отличаются с помощью VueJs

Question

Я использую следующий геттер в моем магазине Vuex, чтобы получить наборы данных из моего штата.

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

Тем не менее, это возвращает столько наборов данных, сколько наблюдений в моем состоянии, тогда как он должен возвращать только один набор данных.

Я полагаю, что это связано с полем __obs__, добавленным VueJ, который отличается для каждого объекта набора данных.

Я что-то не так понял и как это исправить?

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