# Объект со статичными полями

Имеется в виду объект, у которого статичная структура, мы не добавляем поля и не удаляем их, а лишь изменяем существующие.

# Класс


 
 
 
 


 



 






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


StaticObjectPropertyTwo Значение settings: { "firstProp": "I'm a prop in object", "secondProp": 666 }
Обновлено: 12/12/2022, 3:53:53 PM