Перевод статьи Anthony Gore: 5 Vuex Plugins For Your Next VueJS Project. Опубликовано с разрешения автора.
Можно привести много доводов использования Vuex в целях управления состоянием приложения.
Одним из таких доводов можно назвать возможность расширения возможностей Vuex при помощи дополнительных плагинов.
Разработчиками из сообщества Vuex было создано огромное количество бесплатных плагинов. Эти плагины могут расширить функционал Vuex настолько, насколько позволит воображение обычного разработчика. А некоторые из них даже выходят за пределы воображения некоторых разработчиков.
В этой статье будет дан краткий обзор пяти плагинов под Vuex, которые вы сможете добавить в свой следующий проект:
- Сохранение state приложения
- Синхронизация state между вкладками
- Локализация приложения
- Управление state приложения
- Кэширование actions
Плагин vuex-persistedstate использует localStorage браузера для сохранения текущего состояния приложения (state) между сессиями.
Другими словами, обновление страниц или закрытие вкладок браузера не позволит потерять уже введенные данные.
Показательным примером работы данного плагина может послужить интернет-магазин: если пользователь вдруг случайно закроет вкладку браузера, то можно снова открыть её и все ранее введенные данные останутся сохраненными:
Плагин vuex-shared-mutations позволяет синхронизировать состояние проекта (state) между открытыми вкладками нескольких запущенных браузеров.
Такой метод осуществляется благодаря сохранению мутации (mutation) в local storage. Возникающее событие в storage запускает процесс обновления во всех остальных вкладках/окнах, что в свою очередь запускает мутацию.
Таким образом выполняется синхронизация состояния (state) приложения.
При помощи плагина vuex-i18n можно выполнять локализацию приложения путём сохранения контента в многоязычном формате. Когда плагин настроен и подключен, то переключить язык контента в приложении - очень простая задача.
Замечательной особенностью плагина является возможность сохранения строк контента совместно с токенами (tokens), например так:
Hello {name}, this is your Vue.js app.Все переводы могут храниться в виде строк с одним и тем же токеном:
С помощью плагина vuex-loading можно управлять несколькими состояниями (states) приложения. Удобство использования данного плагина очевидно при разработке приложения, в котором часто меняются состояния (states), которые можно легко отследить:
Плагин vuex-cache может кэшировать действия (actions) Vuex. К примеру, если приложение получает данные с сервера, то плагин может сохранять первоначально полученные результаты и выдавать их при соответствующих запросах.
Если есть необходимость удалить кэшированные данные - это можно сделать очень просто.
В заключение я хотел бы услышать о ваших любимых Vuex-плагинах в комментариях к этой статье.