Привет! Если вы находите диспетчерские действия в vuex с использованием строковых констант раздражающими и беспорядочными (даже более беспорядочными, если у вас есть модули vuex с пространством имен), тогда вам может понравиться подход, который я сейчас использую.
В этой статье я покажу вам, как упростить отправку действий с помощью классов TypeScript и концепции Action Creators. Кроме того, я покажу вам, как структурировать хранилище vuex в модули и безопасно импортировать их (без этих надоедливых ошибок типа «геттер не найден»; каламбур) и как использовать файлы index.ts для сокращения операторов импорта.
Я создал пустой проект, используя vue-cli с vuex, typescript и scss, выбранными из мастера создания проекта. Я структурирую свои файлы, связанные с vuex, в функциональные модули. У каждого модуля есть соответствующая папка в папке магазина. В этой статье мы создадим модуль vuex auth. Давайте создадим соответствующие файлы в папке ./store/auth:
types.ts - содержит действия и мутации в виде перечислений (спасибо TypeScript!), интерфейс, который описывает состояние функции и действий в виде классов (называемых создателями действий).
Интерфейс Action, который реализуется каждым создателем Action, содержит свойство типа только для чтения и дополнительное свойство полезной нагрузки, вы можете не определять такой интерфейс, однако он дает вам некоторую безопасность типов при определении редукторов.
Далее мы посмотрим на actions.ts, здесь мы определяем наши функции действий. Здесь мы также запускаем наш асинхронный код. Мы также будем использовать перечисления, определенные выше, для сопоставления действий с помощью определения имени свойства переменной Javascripts. Кроме того, я часто использую rxjs, и в этом примере я использую его для всех HTTP-вызовов, если вы не знаете, что rxjs, просто обратите внимание, что функция подписки в приведенном ниже примере вызывается, когда HTTP-вызов возвращается (воспринимайте это как 'then' функция в обещании)
Далее, mutations.ts. Здесь мы меняем состояние в магазине.
Теперь давайте посмотрим, как мы определяем геттеры с помощью getters.ts.
Теперь, чтобы показать вам, что вы на самом деле экспортируете из index.ts (файл, расположенный в ./store/auth/index.ts)
Как видите, мы отображаем наши действия, мутации, геттеры и состояние в объект модуля, который затем экспортируется. Мы также экспортируем состояние по умолчанию и переменную пространства имен, которая указывает, находится ли наш модуль в пространстве имен (в нашем случае идентифицируется по префиксу «auth /»).
Теперь у меня возникли некоторые проблемы, если я загрузил модуль прямо в магазин, и я обнаружил, что гораздо более стабильно и надежно загружать модули в компонент App.vue следующим образом.
Я нашел этот подход лучше, поскольку он больше полагается на TypeScript, лучше структурирован, что делает его более удобным в обслуживании и упрощает работу с модулями пространств имен в vuex за счет использования имени модуля в качестве переменной в свойстве типа каждого класса Action, что дает вам некоторые дополнительная безопасность при диспетчеризации действий.
