Свойство с валидацией

Сделаем свойство с проверкой значения при записывании. Реализовать можно, используя технологию Proxy, также как мы делали с приватным свойством.

Класс

Важные моменты, про которые можно забыть:

1. Нужно добавить проверку на имя свойства, иначе можно будет добавить какие-то левые свойства
2. В случае, если вы переопределяете set, операцию присваивания нужно проводить самостоятельно
3. В конце нужно возвращать true, иначе у вас будет exception

class ValidatedPrimitiveProperty {
  _validatedString = {
    value: 'I\'m only string',
  }

  get validatedString() {
    return new Proxy(this._validatedString, {
      set(obj, prop, value) {
        // Запрещаем добавление новых полей
        if (prop !== 'value') {
          throw new Error('Only accesible property is "value"');
        }

        // Запрещаем записывать НЕ строку
        if (typeof value !== 'string') {
          throw new TypeError('Value must be string');
        }

        // Проводим операцию присваивания
        obj[prop] = value;

        // Сигнализируем, что ошибки не возникло
        return true;
      },
    });
  }
}

const instance = new ValidatedPrimitiveProperty();

export default instance;

Компонент

Добавим в наш компонент несколько методов для проверки валидации

<template>
  <div class="component-block">
    <span class="name">ValidatedPrimitiveOne</span>

    <span><b>Значение validatedString:</b> {{ validatedString.value }}</span><br/>

    <button @click="addProperty">Задать дополнительное поле</button><br />
    <button @click="changeToNumber">Присвоить число</button><br />
    <button @click="changeToString">Присвоить строку</button><br />

    <span v-if="error">{{ error }}</span>
  </div>
</template>

<script>
import ValidatedPrimitiveProperty from '@example-services/ValidatedPrimitiveProperty';

export default {
  data() {
    return {
      validatedString: ValidatedPrimitiveProperty.validatedString,
      error: '',
    };
  },
  methods: {
    addProperty() {
      try {
        this.validatedString.anotherField = 'someString';
      } catch (e) {
        this.error = e;
      }
    },
    changeToNumber() {
      try {
        this.validatedString.value = 15;
      } catch (e) {
        this.error = e;
      }
    },
    changeToString() {
      this.validatedString.value = 'I got through validation!';
    }
  },
}
</script>

Результат

ValidatedPrimitiveOne Значение validatedString: I'm only string

ValidatedPrimitiveTwo Значение validatedString: I'm only string