Сервисная архитектура во Vue 2 | Проектирование класса (примитивы и объекты)

Это 2 часть цикла статей о сервисной архитектуре во Vue 2. В 1 части я рассказала о том, какие способы выноса логики популярны на данный момент, почему они меня не устраивали, и чего я хотела достичь.

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

Примитив

Я решила начать с того, чтобы попытаться встроить примитивное свойство из класса в компонент. Логика простая, сам примитив не передашь, он запишется и все, связи нет. Тогда я вспомнила про функцию ref из Vue 3 (docs), где все примитивы они предлагают обернуть в объект по структуре:

{ value: <some_val> }

Итак, пробуем создать класс

class Example {   someString = {     value: 'someString',   }; }  const example = new Example();

Пытаемся встроить свойство в пару компонентов как-то так

<template>   <div>     <span>Value: {{ someString.value }}</span>   </div> </template>

export default {   data() {     return {       someString: example.someString,     };   }, }

Нам же еще нужно это свойство изменить, добавляем кнопку и метод

<template>   ...     <button @click="changeValue">Change value</button>   ... </template>

...   methods: {     changeValue() {       this.someString.value = 'someAnotherString';     },   }, ...

И наконец, проверяем

Я понимаю, что сейчас можно подумать что-то вроде «Ну это же очевидно, что оно сработает». И когда я попробовала, и оно сработало, я подумала абсолютно то же самое. Но почему-то до этого я никогда не пыталась так сделать, ровно также как и многие другие на самом деле.

Вся эта реактивность во Vue с его геттерами и сеттерами была покрыта некоторой мистикой, хоть я и смотрела видео до этого с объяснениями этой технологии, но все равно не задумывалась о том, что если мы передадим ссылку на объект, то связь будет, ей некуда будет деваться. Хотя если бы в фреймворке сделали бы хотя бы shallow copy, то пришлось бы как-то вертеться.

Хорошо, а если бы мы хотели менять через метод класса? Как бы мы могли сделать это?

Давайте добавим метод

class Example {   ...   changeValue() {     this.someString.value = 'anotherString';   } }

В компонент мы могли бы встроить его как-то так

methods: {   changeValue() {     example.changeValue();   }, },

И это бы сработало, но мне не нравится лишний код, проксирование там где не нужно, мы ведь хотим просто вызвать метод, правильно? Путем проб и ошибок, я начала встраивать его так

export default {   data() {     return {       ...       changeValue: example.changeValue.bind(example),     };   }, }

Подробнее о том, почему метод встраивается в секцию data я буду говорить в 3-ей части, когда разговор будет идти о разных экземплярах и их уничтожении.

Давайте проверим

Хорошо, мы успешно использовали свойство из класса, смогли поменять его из компонента и из метода. Но если мы на этом остановимся, мы никогда не сможем обеспечить защищенность данных и найти, в каком месте эти данные были изменены, будет сложновато.

Давайте сделаем наше свойство для компонента в формате read-only и заставим производить изменения только через методы.

Создадим класс с псевдо-приватным свойством (покажем это визуально) и методом для его изменения

class Example {   _privateString = {     value: 'I\'m private',   }    changePrivateString() {     this._privateString.value = 'My value is changed from method';   } }  const example = new Example();

Но как нам ограничить его изменения внешне, из компонента? Я реализовала это через геттер с Proxy (docs). Добавим геттер

class Example {   ...   get privateString() {     return new Proxy(this._privateString, {       // Запрещаем изменение       set() {         throw new Error('This property is read-only');       },     });   } }

Суть в том, что компонент забирает именно публичный геттер, а не внутреннее приватное свойство. О том, как разрешать компоненту получать только публичные свойства, я буду говорить в 4 части.

В set необязательно кидать exception, достаточно вернуть из сеттера false, но таким образом мы получаем ошибку без нормального описания

В двух компонентах заберем публичный геттер

data() {   return {     privateString: example.privateString,   }; },

Но в первом компоненте попытаемся изменить с компонента через присваивание

methods: {   changeValue() {     this.privateString.value = 'Should cause error';   }, },

А во втором компоненте изменим через метод класса

data() {   return {     ...     changeValue: example.changePrivateString.bind(example),   }; },

Давайте проверим

Окей, с read-only разобрались, а что если мы хотим, чтобы данные менялись с компонента, но нам нужна дополнительная валидация? Для этого нам нужно изменить наш Proxy, чтобы он не запрещал изменения, а валидировал их.

Предположим, нам нужно проверить, что в наше свойство можно записать только строку, тогда сеттер будет выглядеть так

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; },

Я сделала тестовый компонент для проверки, куда добавила несколько присваиваний, вот результат

Объект

Мы оборачивали примитив в объект, так что работа с остальными объектами естественно будет схожа. Но когда мы разговариваем про обычный объект, то у нас появляются дополнительные кейсы, которые нужно учесть.

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

А что если нам нужно добавить поле? Документация Vue подсказывает выход — использовать Vue.set. Работает ли это, если мы вызовем это в классе, а не в компоненте? Давайте проверим.

Сделаем класс со свойством-объектом, импортируем туда Vue, и сделаем метод, где мы добавим новое свойство с помощью set

import Vue from 'vue';  class Example {   testObject = {     oldField: 'I was here from the beginning!'   }    addNewField() {     Vue.set(this.testObject, 'newField', 'I was added recently!');   } }  const example = new Example();

Сделаем пару тестовых компонентов, где мы получим наше свойство и метод. Для теста давайте добавим туда еще дополнительный метод, который будет добавлять новое свойство из компонента с помощью this.$set

export default {   data() {     return {       testObject: example.testObject,       addNewField: example.addNewField.bind(example),     };   },   methods: {     addField() {       this.$set(this.testObject, 'fieldFromComponent', 'I was added from component!');     }   } };

Итак, время истины

К этому моменту у меня складывается ощущение, что если мы и столкнемся с какой-то проблемой с реактивностью, то она скорее будет связана с изначальной архитектурой фреймворка, чем с нашими изысканиями.

Окей, а что если наш объект приходит с сервера, и мы хотим сначала инициализировать его как null, а потом уже записать значение? Перезаписать наше свойство в классе мы не можем, так что воспользуемся тем же механизмом, который использовали для работы с примитивом. Т.е. обернем наш объект в еще один объект.

class Example {   obj = {     value: null,   }    fillObj() {     this.obj.value = { field: 'field' };   } }

Выведем в паре компонентов, вызовем метод и проверим

Если мы хотим запретить изменения в объекте из компонента, то тактика такая же, как и с примитивом. Делаем геттер, где отдаем наш объект, обернутый в Proxy, из set кидаем ошибку.

Но во время тестирования я обнаружила любопытную особенность, связанную с this.$set. Так как это достаточно узкий кейс, в статье я на этом останавливаться не буду, welcome на страничку в моей документации, там я это описала.

С валидацией объекта все абсолютно также, как мы делали для примитива. Но в документации я привела пример того, как можно использовать эту технологию на примере валидации значений в форме. Покажу под катом, какой компонент в результате у меня получился.

<template>   <div>     <p>       <input         v-model="form.firstName"         placeholder="Имя"         :class="{ 'error': errors.firstName }"       /><br/>       <span v-if="errors.firstName" class="error">         {{ errors.firstName }}       </span>     </p>      <p>       <input         v-model="form.age"         placeholder="Возраст"         :class="{ 'error': errors.age }"       /><br />       <span v-if="errors.age" class="error">         {{ errors.age }}       </span>     </p>   </div> </template>

import ValidatedForm from '@example-services/ValidatedForm';  export default {   data() {     return {       form: ValidatedForm.form,       errors: ValidatedForm.errors,     };   }, }

Полный пример (и в том числе, как выглядит класс, для того чтобы компонент выглядел так), смотрите в моей документации.

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

План примерно такой: в 3 части поговорим о массивах и вычисляемых свойствах, в 4 части поговорим об экземплярах класса и удобных функциях, чтобы можно было встраивать класс в компонент проще.