Redux и Vuex создают единый экземпляр store из объявленного набора модулей, который отвечает за отправку / совершение зарегистрированных действий / мутаций, для которых тип должен быть указан как значение string. При масштабировании приложения использование действий / мутаций становится довольно распространенным, а использование простых строк значительно снижает предсказуемость мутаций состояний.
Использование констант, таких как:
export const ADD_PORTFOLIO = 'ADD_PORTFOLIO'
позволяет составить список всех доступных мутаций состояний в отдельном файле, подобном списку, что обеспечивает четкое понимание возможных изменений, избегая опечаток внутри модулей хранилища и позволяя IDE и редакторам кода автоматически заполнять или выделять недопустимые ссылки на константные типы. Что сокращает время отладки и было бы невозможно при простых string с. Это не требуется, и это не изобретение упомянутых библиотек. По тем же причинам хорошо работает с глобально вызванными событиями (например, Node EvenEmitter , Electron ipcRenderer и т. Д.).
И Redux, и Vuex хранят состояние в простых объектах и требуют, чтобы их API были определены как функции (каждая со своей собственной архитектурой), которые будут объединены в один экземпляр хранилища. Это служит для предоставления оперативных обновлений об изменениях состояния, предупреждений, когда состояние видоизменяется за пределами мутаций или отправленное действие / мутация не зарегистрированы. Мое мнение таково, что этот подход эффективен при отсутствии безопасности типов, без которой обе библиотеки изначально предназначены для использования.
Например, в Vuex, если вы решили вызвать действие или мутацию из другого модуля, вы должны использовать dispatch (для действий) или commit (для мутаций) с типом, на который ссылается полный путь к модулю:
dispatch('profile/addPortfolio', payload, { root: true })
commit('profile/ADD_PORTFOLIO', payload, { root: true })
Это означает, что оба вызова должны быть выполнены с помощью store методов экземпляра и должны быть зарегистрированы в текущем store экземпляре, а не импортировать и вызывать действие или мутацию модуля напрямую.
В случае, если Typescript интегрирован в проект, можно использовать структуру класса или декораторы для магазина и его модулей. Опять же, классы будут скомпилированы в соответствии с архитектурой библиотеки магазина, но улучшат опыт разработки.
Что касается Vuex, то для использования с Typescript стоит проверить следующие библиотеки:
TLDR
Такая архитектура определяется упомянутыми библиотеками для использования без безопасности типов, но все же допускает реактивность и централизованную мутацию состояний. Константы помогают гарантировать, что действия / мутации регистрируются в экземпляре магазина, повышают предсказуемость и обеспечивают автозаполнение для редакторов кода.