Погрузитесь в магазин с более чем 1000 объектами недвижимости
Просматривая руководства по Vuex, вы можете увидеть, что большинство из них довольно просты.
Логика хорошо объяснена, но страдает масштабируемость. Как это будет работать в моем рабочем приложении?
Вот простой пример магазина из официальных документов Vuex:
Нет необходимости объяснять это. Я предполагаю, что до этой статьи у вас уже были некоторые знания Vue и Vuex.
Моя цель - не объяснять, что такое хранилище, состояние или мутации.
Вместо этого я хочу показать вам огромный магазин с более чем 1000 атрибутами состояний, мутациями, действиями и геттерами.
Я хочу научить вас, как структурировать магазин, чтобы обеспечить удобство обслуживания, удобочитаемость и возможность повторного использования.
Он может иметь более 100 000 атрибутов. Все равно было бы ясно.
Давайте погрузимся.
Встречайте модули
Как мы уже говорили, хранение всего в одном файле создаст беспорядок. Вам не нужен LOC-файл размером 50 000+. Это то же самое, что сохранить приложение в одном компоненте.
Vuex помогает нам в этом, разделяя магазин на модули.
Для этого примера я создам магазин с двумя модулями. Обратите внимание, что процесс одинаков для более чем 100 модулей, а также для более 100 действий, геттеров и мутаций в каждом модуле.
Атрибут namespaced здесь невероятно важен. Без него действия, мутации и геттеры все равно регистрировались бы в глобальном пространстве имен.
Установив для атрибута namespaced значение true, мы также разделяем действия, мутации и геттеры на модули.
Это действительно полезно, если у вас есть два действия с одинаковым именем. Их размещение в глобальном пространстве имен приведет к конфликтам.
Как видите, сейчас модуль полностью «локален». Мы можем получить к нему доступ только через объект пользователя в состоянии.
Именно то, что мы хотим для нашего массового приложения.
Круто, теперь у нас есть магазин, разделенный на модули!
Однако мне не нравятся жестко запрограммированные строки для действий. Это определенно не подлежит ремонту. Давайте займемся этой проблемой.
Типы, чтобы спасти вас от головной боли
Мы не просто хотим получить доступ к каждому свойству из каждого модуля в каждом файле. Это предложение звучит адски.
Мы хотим сначала импортировать их. Для этого используйте mapGetters, mapActions или mapMutations.
Это дает вам четкое представление об атрибутах магазина, используемых вашим файлом Vue.
Но этого мало. Все по-прежнему в одном файле. Давайте посмотрим, что мы можем сделать, чтобы правильно его масштабировать.
Структура папки
В идеале мы хотим разделить модули по разным папкам. Внутри этих модулей мы хотим разделить их мутации, действия, геттеры, атрибуты состояния и типы по разным файлам.
Папка store будет создана в корневой папке нашего проекта.
Он будет содержать две вещи:
index.jsфайлmodulesпапка
Прежде чем объяснять index.js файл, давайте посмотрим, как мы разделяем один модуль. Давайте проверим модуль user.
Все его действия, мутации и геттеры должны быть перечислены в файле types.js. Итак, что-то вроде:
У нас будет четкое представление, импортируя эти константы каждый раз, когда мы захотим их использовать.
Давайте теперь посмотрим на действия. Мы хотим переместить их в файл actions.js.
Для этого нам нужно только скопировать actions объект в модуль и export default его при импорте типов:
Мы сделаем то же самое с мутациями и геттерами. Атрибуты состояния останутся в index.js (в папке пользовательского модуля):
Теперь все наши модули разделены на несколько файлов.
Осталось только связать все эти модули в index.js файле в папке store:
Заключение
Используя эту архитектуру, у нас не было проблем с масштабируемостью в нашем массовом производственном приложении.
Все так легко найти.
Мы точно знаем, где запускаются все действия.
Система очень удобна в обслуживании.
Если у вас есть какие-либо рекомендации по улучшению, дайте мне знать. Хотелось бы услышать ваше мнение.
