Простое и понятное управление состоянием во vue.js – Александр Сафт - Vue.js Moscow Meetup

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

В докладе Александр расскажет и покажет на примерах как сделать код приложения на Vue еще проще, не потеряв в надежности и выразительности.

Transcript

1. Простое и понятное 
 управление состоянием во Vue.js Александр Сафт Смотрешка
2. Какие бывают проекты Сложные Простые 2
3. Менеджер состояний Менеджер состояний содержит: 1. Хранилище 2. Мутатор 3. Механизм подписки 3
4. Задача 1. Получить данные с сервера 2. Отобразить данные 3. Отобразить сообщение об ошибке (в случае ошибки) Ключевые моменты: • Асинхронная работа с сервером • Централизованная и локальная обработка ошибок 4
5. Состояния асинхронного действия 5
6. Сценарий тестирования Приведем простой сценарий тестирования:
 • Подождать 100 мс • Посчитать random() • Если random() < 0.5, упасть с ошибкой • Если больше – вернуть значение 6
7. Асинхронность чистая Без менеджера состояний – внутри компонента. Нужны: • Сама асинхронная функция • Три места в разметке: • Для прелоадера • Для отображения результата • Для отображения ошибки 7
8. Vue-async-methods Простой плагин, который оборачивает переданные ему промисы в объект с флагами и данными, которыми сам и управляет. 
 Флаги: isCalled, isPending, isResolved, isRejected
 Значения: resolvedWith, resolvedWithSomething, resolvedWithEmpty
 Ошибка: rejectedWith 
 Прочее: execute, promise 8
9. vue-async-methods 9
10. vue-async-methods 10
11. Асинхронность с менеджером состояний • Данные, флаги, ошибки – всё в хранилище • Нужен «обслуживающий» код • Линейная зависимость • Коэффициент может быть слишком высоким 11
12. Redux reducer – flux standard actions • Создание экшенов автоматизировано • Нет необходимости хранить строки • Очень хорошо показывает себя в связке с TypeScript 12
13. Redux reducer – flux standard actions 13
14. Можно ли упростить? Ошибка загрузки данных нужна только чтобы ее отобразить. Приложение не зависит от этой ошибки. Цель: оставить в сторе только бизнес-логику. 14
15. Vuex: стор 15
16. Vuex: подключение 16
17. Vuex: разметка 17
18. Можно ли упростить? store.commit()– «обслуживающий» код Хранилище хочется сделать проще Экшен - лаконичнее А подключение - тривиальным 18
19. vue-stash: стор и экшен 19
20. vue-stash: подключение и разметка 20
21. Можно ли упростить? Можно. Всегда можно. Некоторые варианты: • Добавить шину событий • Не класть данные в стор • Лазить в стор из компонентов. 21
22. Переходный процесс от jquery к 2018 22
23. Ссылки https://github.com/mokkabonna/vue-async-methods https://github.com/cklmercer/vue-stash https://github.com/cklmercer/vue-events Пример бойлерплейта с vue-stash и vue-events https://github.com/cklmercer/vue-mix 23
24. Спасибо за внимание Александр Сафт. GitHub, Telegram: @fend25 24