Добавление вместе вложенных значений объекта data () с одинаковыми ключами в VueJS Components

Question

У меня есть набор значений с одинаковыми ключами, которые вложены в соседние объекты в возвращении data() {} моего компонента VueJS.

пример:

data() { 
  return {
     foo: {
         userScore: 10,
         computerScore: 5
     },
     bar: {
         userScore: 22,
         computerScore: 100
     }
  }
}

Каков наилучший / наиболее эффективный способ добавления bar.userScore и foo.userScore без необходимости каждый раз записывать полный маршрут JSON? (Компонент, который я пишу для этого, имеет около 40+ этих баллов, поэтому внесение изменений в вычисления кажется немного странным)

Есть ли способ получить доступ к этим идентичным свойствам, например *.userScore?

Спасибо за чтение!

Answer 1

Вы можете reduce получить сумму:

const sum = Object.keys(this.$data).reduce((sum, key) => {
  if (this.$data[key].hasOwnProperty('userScore')) {
    return (sum + this.$data[key].userScore)
  }
  return sum
}, 0)