В первой части статьи мы рассмотрели такие компоненты Vuex, как хранилище, состояние, гетры, мутации и действия. Вы можете увидеть все в деталях здесь https://amoniac.dev.ua.amoniac.eu/blog/post/correct-and-effiate-vuex-using-part-i И мы продолжим наш обзор библиотеки VEUEX и говорим о модулях, структуре приложений, плагинах и т. Д.
Модули
Из -за использования одного дерева состояния все глобальные данные приложения помещаются в один большой объект. По мере роста приложения хранилище может значительно набухать. Чтобы помочь с этим, Vuex позволяет разделить хранилище на модули. Каждый модуль может содержать свое собственное состояние, мутации, действия, гетры и даже встроенные подмодули, эта структура является фрактальной.
Первый аргумент, который получают мутации и геттеры, – это локальное состояние модуля. Точно так же Context.state В действиях также указывает локальное состояние модуля, а корень доступен в Context.Rootstate . По умолчанию действия, мутации и гетры внутри модулей зарегистрированы в глобальном пространстве имен. Это позволяет нескольким модулям реагировать на один и тот же тип мутаций/действий.
Если вы хотите сделать модули более самодостаточными и готовыми к повторному использованию, вы можете создать его с помощью своего пространства имен, указав Название: True вариант. Когда модуль зарегистрирован, все его добычи, действия и мутации будут автоматически связаны с этим пространством имен, на основе пути, по которому зарегистрирован модуль.
Геттеры и действия с их пространством имен получат их локальный Getters , отправка и Компет Анкет Другими словами, вы можете использовать содержимое модуля без написания префиксов в том же модуле. Переключение между пространствами имен не влияет на код внутри модуля.
Если вы хотите использовать глобальное состояние и Getters, ROYTSTATE и rootgetters передаются в 3 -м и 4 -м аргументах функции Getter, а также свойства в контекст Объект, передан к функции действия. Чтобы вызвать действия или совершать мутации в глобальном пространстве имен, добавьте {root: true} С третьим аргументом в отправка и Компет Анкет
Если вы хотите зарегистрировать глобальные действия в модулях с именами, вы можете отметить их Корень: Верно и поместите определение действия, чтобы функционировать обработчик Анкет Кроме того, вы можете создавать помощников с именами, используя CreateNamespedHelpers Анкет Он возвращает объект, имеющий новых помощников для привязки компонентов, которые связаны со значением пространства имен.
Вы можете быть обеспокоены непредсказуемостью пространства имен для ваших модулей, когда вы создаете плагин с его модулями и возможностью для пользователей добавить их в репозиторий VEUEX. Ваши модули также будут размещены в пространстве имен, если пользователи плагина добавят ваши модули в модуль с их пространством имен. Чтобы адаптироваться к этой ситуации, вам может потребоваться получить значение пространства имен через настройки плагина.
Вы можете зарегистрировать модуль даже после того, как хранилище было создано с использованием Store.RegisterModule метод Статус модуля будет доступен как Store.state.mymodule и Store.state.nested.mymodule . Динамическая регистрация модуля позволяет другим плагинам VUE также использовать VEUEX для управления своим состоянием, добавив модуль в хранилище данных приложения. Например, vuex-router-sync Библиотека интегрирует VUE-Router в VEUEX, отражая изменение текущего пути приложения в динамически прикрепленном модуле.
Вы можете удалить динамически зарегистрированный модуль, используя store.unregistermodule (modulename) Анкет Обратите внимание, что статический, определенный в момент создания репозитория, модули не могут быть удалены с помощью этого метода.
Иногда нам может потребоваться создать несколько экземпляров модуля, например:
- Создание нескольких хранилищ, которые используются одним модулем, например, чтобы избежать государственных синглетов в SSR при использовании
RuninnewContextопция, еслиЛОЖЬили«Однажды '; - Зарегистрирование модуля несколько раз в одном хранилище.
Если мы используем объект для определения состояния модуля, то этот объект состояния будет использоваться посредством ссылки и вызвать загрязнение состояния хранения/модуля во время его мутаций. Это на самом деле та же проблема с данные Внутри компонентов VUE. Так что решение будет таким же.
Структура приложения
В действительности Vuex не налагает каких -либо существенных ограничений на используемую структуру кода. Тем не менее, это требует соблюдения нескольких принципов высокого уровня:
- Глобальное состояние приложения должно содержаться в глобальном хранилище;
- Единственный механизм изменения этого состояния – это мутации, которые являются синхронными транзакциями;
- Асинхронные операции инкапсулируются в действиях или их комбинациях.
Пока вы следовали этим правилам, вы можете использовать любую структуру проекта. Если ваш файл хранилища становится слишком большим, просто начните ставить действия, мутации и заталкивать в отдельные файлы. Для любого нетривиального приложения вам, скорее всего, потребуется использовать модули. Вот пример возможной структуры проекта. Для справки, вы можете использовать пример корзины для покупок.
Плагины
Репозитории Vuex принимают плагины опция, которая обеспечивает крючки для каждой мутации. Плагин Vuex – это просто функция, которая получает хранилище в качестве единого параметра. Плагинам не разрешается напрямую изменять состояние приложения, а также компоненты. Они могут только вызвать изменения косвенно с использованием мутаций.
Вызывая мутации, плагин может синхронизировать источник данных с помощью хранилища данных в приложении. Например, для синхронизации хранилища с помощью веб -сокета пример намеренно упрощается в реальной ситуации, CreateWebSocketPlugin будет иметь дополнительные варианты. Иногда плагин может потребоваться «взять самородка» состояния приложения или сравнить мутации «до» и «после». Для этого используйте глубокое копирование государственного объекта.
Плагины впечатления должны использоваться только во время разработки. При использовании WebPack или Browserify мы можем дать этот момент по их милости. Плагин будет использоваться по умолчанию. В производственной среде вам понадобится DefinePlugin для WebPack или Envify для браузера, чтобы изменить значение process.env.node_env! к ложный в окончательной сборке.
Vuex поставляется с плагином журнала, который можно использовать для отладки. Вы также можете включить плагин журнала напрямую, используя отдельный <Скрипт> тег, который помещает CreateVuexlogger Функция в глобальном пространстве имен. Обратите внимание, что этот плагин делает государственные активы, поэтому вы должны использовать его только на этапе разработки.
Строгий режим
Чтобы включить строгий режим, укажите строго: истинно При создании репозитория Vuex. В строгом режиме любая попытка внести изменения в состояние Vuex, за исключением мутаций, принесет ошибку. Это гарантирует, что все государственные мутации явно отслеживаются с помощью инструментов отладки.
Не используйте строгий режим в производстве! Строгий режим запускает глубокое отслеживание дерева состояния приложения в синхронном режиме для обнаружения неуместных мутаций, и это может быть дорогостоящим для производительности, когда происходит большое количество мутаций. Обязательно выключите этот режим в производстве, чтобы избежать снижения производительности.
Работать с формами
При использовании строгого режима Vuex может показаться не очевидным, как использовать V-модель с частью штата Vuex. Предположим obj является вычисленным свойством, которое возвращает ссылку на объект из репозитория. В этом случае V-модель постараюсь изменить obj.message значение во время действий пользователя напрямую. В строгом режиме такие изменения вызовут ошибку, потому что они происходят за пределами обработчиков мутации Vuex. Чтобы работать с Vuex в этой ситуации, вы должны связать ценность с и отслеживать его изменения по вход или Изменение мероприятие.
Тестирование
Основным предметом единичного тестирования в Vuex являются мутации и действия. Мутации довольно просты в тестировании, так как они являются просто простыми функциями, поведение которых полностью зависит от принятых параметров. Одна хитрость заключается в том, что если вы используете модули ES2015 и помещаете свои мутации в Store.js Файл, затем в дополнение к экспорту по умолчанию, вы должны экспортировать мутации, используя названные экспорты.
Тестирование мероприятий немного сложнее, так как они могут получить доступ к внешним API. При тестировании действий вам обычно приходится фальшивые внешние объекты – например, вызовы в API могут быть перемещены в отдельную службу, и, как часть тестов, эта служба может быть заменена на фальшивую. Чтобы упростить моделирование зависимостей, вы можете использовать WebPack и Inject-Loader для создания тестовых файлов.
Геттеры, выполняющие сложные расчеты, также были бы полезны для тестирования. Как и в случае с мутациями, все просто. Если вы правильно следовали правилам написания мутаций и действий, полученные тесты не должны зависеть от API браузера. Следовательно, они могут быть собраны WebPack и запустить в узле. С другой стороны, вы можете использовать Мокко-загрузчик или карма + Карма-Webpack и запустить тесты в реальных браузерах.
Горячая перезагрузка
Vuex поддерживает горячие мутации, модули, модули, действия и застрахованные во время разработки, используя API замены горячего модуля WebPack. Аналогичная функциональность в браузерефике достижима с использованием плагина Browserify-HMR. Для мутаций и модулей вам нужно использовать Store.hotupdate () Метод API.
Почему действия Vuex являются идеальным интерфейсом API
Если вы работаете над проектом, в котором разрабатываются задний конец и фронт -конец, или вы работаете в команде пользовательского интерфейса/фронта, которая может даже создать пользовательский интерфейс до того, как существует задний конец, вы, вероятно, знакомы с Проблема, когда вам нужно утопить запасные части или данные по мере развития передней части.
Общий способ, которым это проявляется, связан с чисто статическими шаблонами или содержанием, с заполнителями и текстовыми текстами в ваших шаблонах интерфейса. В шаге от этого есть какая -то форма светильников, данные, которые статически загружаются интерфейсом и вводится на место. Оба они часто сталкиваются с одним и тем же набором проблем. Когда задний конец наконец доступен, существует множество рефакторинга, чтобы получить данные на месте.
Даже если структура данных с заднего конца соответствует вашим приспособлениям, вам все равно нужно пересечь, чтобы найти каждую точку интеграции. И если структура отличается, вы должны не только сделать это, но и выяснить, как вы можете либо изменить внешний интерфейс, либо создать уровень абстракции, который преобразует данные.
Сильные стороны и преимущества хранилища Vuex
По сравнению с простым глобальным объектом, репозиторий Vuex имеет много значительных преимуществ и преимуществ:
- Vuex Storage – Reactive. Как только компоненты получат состояние из него, они будут реактивно обновлять свои взгляды каждый раз, когда состояние меняется.
- Компоненты не могут напрямую изменить состояние репозитория. Единственный способ изменить состояние репозитория – это явно совершить мутации. Это гарантирует, что каждое изменение штата оставляет отслеживаемую запись, которая облегчает отладку и тестирование приложения.
- Компоненты не могут напрямую изменить состояние репозитория. Единственный способ изменить состояние репозитория – это явно совершить мутации. Это гарантирует, что каждое изменение штата оставляет отслеживаемую запись, которая облегчает отладку и тестирование приложения.
- Вы можете легко отладить свое приложение, интегрируя Vuex с расширением Vue Devtools.
- Vuex Repository дает вам общую картину состояния того, как все связано, и влияет на приложение.
- Легче поддерживать и синхронизировать состояние между несколькими компонентами, даже если изменяется иерархия элементов.
- Vuex обеспечивает прямое взаимодействие компонентов друг с другом.
- Если компонент уничтожен, государство в репозитории Vuex останется нетронутым.
Резюме
Работая с Vuex, нам нужно помнить некоторые важные моменты. Vuex создает репозиторий, который состоит из состояний, Getters, мутаций и действий. Чтобы обновить или изменить состояние, должен сделать мутацию. Чтобы выполнить асинхронную задачу, вам нужно действие. Действия, в случае успеха, совершают мутацию, которая меняет состояние, тем самым обновляя презентацию. Состояние приложения хранится как один большой объект JSON. Геттеры используются для доступа к значениям в магазине. Условие обновления мутаций. Следует помнить, что мутации синхронны. Все асинхронные операции должны выполняться в рамках действий. Действия меняют состояние, инициируя мутации. Сделайте правило, чтобы инициировать мутации исключительно через действие. Модули могут использоваться для организации хранения в нескольких небольших файлах.
Vuex делает работу с VUE гораздо более удобной и веселее. Если вы новичок, могут быть ситуации, когда трудно решить, использовать ли Vuex в определенных областях применения. Следуйте инстинктам и довольно быстро достигайте высокой скорости.
Оригинал: “https://dev.to/amoniacou/correct-and-efficient-vuex-using-part-ii-1877”