Vue шаг за шагом. Применение Примесей (Mixins). Пример#4
Во фреймворке Vue реализован удобный механизм примесей (mixins). Вы можете создать объект, который будет подмешиваться к создаваемой компоненте. Можно сказать и другими словами — можно создать объект или несколько объектов на основе которых будет создан компонент. Это не то чтобы наследование, просто Вы можете вынести повторяющиеся методы в отдельный миксин и указывать его при создании компоненты. И все, что Вы укажите в миксине будет перенесено в компонент. Используя миксины можно эффективно устранить куски повторяющиеся кода.
Mixin crud
В этом примере в Mixin crud вынесены все методы, связанные с обработкой данных (create_back, read_back, update_back, delete_back). Теперь при создании компоненты достаточно в параметре mixins указать миксины, которые будут подмешаны в компоненту.
Vue.component('client', {
mixins: [crud, crud_front],
template: `
<div>
...
При этом если нам нужно переопределить одноименный метод или свойство в новом компоненте, ничего не нужно делать, кроме как в компоненте описать метод или свойство как это делается обычно.
Поскольку мы решительно разделяем ответственность разных частей нашего приложения, я сделал миксин crud, который отвечает за работу с backend (в будущем будет отвечать за работу с backend). И миксин crud_front, который будет вызывать методы crud и обрабатывать их ответы.
Mixin crud_front
Примесь содержит методы, которые будут вызывать методы описанные в мксине crud и обрабатывать результат их работы. Тем самым формировать поведение компонент. Например, что сделать после успешного обновления записи? Перечитать все данные или перечитать только текущую запись, выдать уведомление, дескать успешно сохранено. То же при других операциях. Например, при удалении, вероятнее всего потребуется запросить подтверждение. Вывести ошибку при неудачной операции и т.п. Все эти методы описаны в отдельном миксине crud_front. crud_front — отвечает за поведение frontend-а. Все операции с backend-ом описаны в отдельном миксине crud. С одной стороны мы разделили функционал, с другой мы можем использовать оба миксина вместе при описании компонент.
Что это нам дает?
Если мы описали поведение компонент в миксине crud_front, а спустя некоторое время на новом этапе развития проекта это поведение нужно изменить, то можно создать еще один миксин, в котором описать новое поведение. И для переделки компонент понадобиться только заменить имя используемого миксина в компоненте. Ни кто не запрещает создать несколько миксинов с разными поведением компонент и использовать нужный.
Касательно миксина crud, можно сказать все тоже самое. В дальнейшем, после того, как сделаем, backend с базой данных, мы перепишем только 4 метода в миксине crud. Компоненты переделывать не придется. Кроме того, если backend будет состоять из нескольких серверов с разными API, то можно будет описать для каждого свой миксин и при создании компонент, указывать нужный. Таким образом разделяя ответственность, можно построить достаточно гибкий в плане будущих модификаций проект.
Ссылки
Примеси (Mixins): https://ru.vuejs.org/v2/guide/mixins.html
Резюме
В этом примере продемонстрированы возможности миксинов во вреймворке Vue, построение компонент во фреймворке Vue с применением миксинов.
В следующем примере
Постраничный вывод табличных данных. Создание компонент — таблиц на основе миксина table.
Смотри также:
- Vue. Vue-router
- Vue. Свойство data. Основы компонент
- Vue. CRUD. Работа с данными
- Vue. Mixins (Примеси)
- Vue. computed свойства. Постраничный вывод данных
- Vue. Сортировка, поиск данных в таблицах
- Vue. Таблица - трансформер под настольные и мобильные версии
- Vue. Стандартная таблица. Минимизируем код
- Vue. Динамическая загрузка компонент
- Vue. Диалоги и Notifications
- Vue.Стандартный компонент для редактирования данных
- Vue. Разнообразие из кирпичиков
- Flask + Vue. Финальный пример
Додати коментар

Недавні записи
- Конструктор регуляторів моторів. Структура.
- Конструктор регуляторів моторів. Анонс.
- Golang + Vue + PostgreSQL #2
- Golang + Vue + SQLite #1
- FOC Position Control. Векторне управління - Стабілізація положення
- Flask & Vue. Завантаження файлів. Приклад № 2.10
- Рекуперація. FOC і цікаві досліди
- Flask & Vue. OAuth. Приклад№ 2.9
- Flask & Vue. Використання систем збірки проекту. Webpack. Приклад№ 2.8
- Flask & Vue. SQLAlchemy, Migrate, Marshmallow, JWT. Приклад№ 2.7
Tags
stm32 bkp soldering eeprom eb-500 led hih-4000 bme280 bmp280 3d-printer usb ethernet html git docker barometer raspberry-pi remap dc-dc rfid java-script nodemcu mpu-6050 rtc capture gpio avr brushless foc options flash flask atmega python displays rs-232 solar st-link ssd1331 dma adc bluetooth web ssd1306 wifi exti mpu-9250 pwm pmsm mongodb programmator i2c battery max1674 piezo css meteo watchdog books websocket servo dht11 ngnix mpx4115a lcd motor uart sensors nvic encoder usart sms smd bldc esp8266 tim timer gps examples
Архіви
