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

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

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

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

3fa2f88e8c707ec90e4ecd1ac2ed023a?s=128

Vue.js Moscow Meetup

March 28, 2018
Tweet

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