# Несколько свойств
Для нескольких свойств можно создать объект-алиас, который будет хранить ссылки на отслеживаемые свойства и сам геттер.
# Класс
class MultipleObjects {
firstPerson = {
name: 'Alex',
}
secondPerson = {
name: 'Dora',
}
plus = {
_first: this.firstPerson,
_second: this.secondPerson,
get val() {
return `${this._first.name} + ${this._second.name}`;
}
}
nextPair() {
this.firstPerson.name = 'Kirill';
this.secondPerson.name = 'Diana';
}
}
const instance = new MultipleObjects();
export default instance;
Подразумевается, что напрямую к изначальным свойствам мы не должны обращаться через этот алиас, хотя это будет работать, но это будет дольше, проще получить оригиналы.
# Компонент
<template>
<div class="component-block">
<span class="name">MultiplePropsOne</span>
<div><b>Пара: </b> {{ plus.val }}</div>
<button @click="nextPair">Следующая пара</button>
</div>
</template>
<script>
import MultipleObjects from '@example-services/MultipleObjects';
export default {
data() {
return {
plus: MultipleObjects.plus,
nextPair: MultipleObjects.nextPair.bind(MultipleObjects),
};
},
};
</script>
# Результат
MultiplePropsOne
Пара: Alex + Dora
MultiplePropsTwo
Пара: Alex + Dora