# Объект со статичными полями
Имеется в виду объект, у которого статичная структура, мы не добавляем поля и не удаляем их, а лишь изменяем существующие.
# Класс
class StaticObjectProperty {
settings = {
firstProp: 'I\'m a prop in object',
secondProp: 666,
}
changeFirstProp() {
this.settings.firstProp = 'I was changed from a method!';
}
addSomeLuck() {
this.settings.secondProp = 777;
}
}
const instance = new StaticObjectProperty();
export default instance;
WARNING
Обратите внимание на то, что сам объект не перезаписывается, только его поля, то есть используются способы изменения, которые не изменят ссылку на объект
# Компонент
<template>
<div class="component-block">
<span class="name">StaticObjectPropertyOne</span>
<span><b>Значение firstProp:</b> {{ settings.firstProp }}</span><br/>
<span><b>Значение secondProp:</b> {{ settings.secondProp }}</span><br/><br />
<button @click="changeFirstProp">Change firstProp</button><br />
<button @click="addSomeLuck">Change secondProp</button>
</div>
</template>
<script>
import StaticObjectProperty from '@example-services/StaticObjectProperty';
export default {
data() {
return {
settings: StaticObjectProperty.settings,
changeFirstProp: StaticObjectProperty.changeFirstProp.bind(StaticObjectProperty),
addSomeLuck: StaticObjectProperty.addSomeLuck.bind(StaticObjectProperty),
};
},
}
</script>
# Результат
StaticObjectPropertyOne Значение firstProp: I'm a prop in object
Значение secondProp: 666
Значение secondProp: 666
StaticObjectPropertyTwo Значение settings: {
"firstProp": "I'm a prop in object",
"secondProp": 666
}