Пять плагинов Vuex

Которые вы можете добавить в свой следующий проект

Перевод статьи Anthony Gore : 5 Vuex Plugins For Your Next VueJS Project. Опубликовано с разрешения автора.


Можно привести много доводов использования Vuex в целях управления состоянием приложения.

Одним из таких доводов можно назвать возможность расширения возможностей Vuex при помощи дополнительных плагинов.

Разработчиками из сообщества Vuex было создано огромное количество бесплатных плагинов.

Эти плагины могут расширить функционал Vuex настолько, насколько позволит воображение разработчика. А некоторые из них выходят за пределы воображения некоторых разработчиков.

В статье представлен краткий обзор пяти плагинов Vuex, которые вы можете добавить в свой следующий проект:

  • Сохранение state приложения
  • Синхронизация state между вкладками
  • Локализация приложения
  • Управление state приложения
  • Кэширование actions

Сохранение state приложения

Плагин vuex-persistedstate использует localStorage браузера для сохранения текущего состояния приложения (state) между сессиями.

Другими словами, обновление страниц или закрытие вкладок браузера не позволит потерять уже введенные данные.

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

Persist Vuex state with localStorage

Синхронизация state между вкладками

Плагин vuex-shared-mutations позволяет синхронизировать состояние проекта (state) между открытыми вкладками нескольких запущенных браузеров.

Такой метод осуществляется благодаря сохранению мутации (mutation) в localStorage. Возникающее событие в storage запускает процесс обновления во всех остальных вкладках/окнах, что в свою очередь запускает мутацию.

Таким образом выполняется синхронизация состояния (state) приложения.

Share Vuex mutations between tabs/windows

Локализация приложения

При помощи плагина vuex-i18n можно выполнять локализацию приложения путем сохранения контента в многоязычном формате. Когда плагин настроен и подключен, то переключить язык контента в приложении — очень простая задача.

Замечательной особенностью плагина является возможность сохранения строк контента совместно с токенами (tokens), например так:

Hello {name}, this is your Vue.js app.

Все переводы могут храниться в виде строк с одним и тем же токеном (token):

vuex-i18n

Управление states приложения

С помощью плагина vuex-loading можно управлять несколькими состояниями (states) приложения. Удобство использования данного плагина очевидно при разработке приложения, в котором часто меняются состояния (states), которые можно легко отследить:

vuex-loading

Кэширование actions

Плагин vuex-cache может кэшировать действия (actions) Vuex. К примеру, если приложение получает данные с сервера, то плагин может сохранять первоначально полученные результаты и выдавать их при соответствующих запросах.

Если есть необходимость удалить кэшированные данные — это легко сделать.

vuex-cache

Заключение

Как логичное продолжение статьи, я хотел бы услышать о ваших любимых Vuex-плагинах в комментариях.