Автор оригинала: Thomas Findlay.
Vuex – официальная государственная библиотека управления Vue.js, с действительно отличной документацией. На мой взгляд, это гораздо приятнее использовать, чем redux, поскольку он требует меньшего кода котеля и поддерживает Async Actions без каких-либо дополнительных библиотек. Более того, поскольку он разрабатывается основной командой Vue.js, она очень хорошо интегрируется с Vue. К сожалению, иногда он все еще может быть узким местом для некоторых, чтобы получить правильную настройку. Vue.js Основная команда Char Chris Fritz создала отличную ботинку для Vue, которую вы можете найти в https://github.com/chrisvfritz/vue-enterprise-boilerplert. Он имеет отличную настройку Vuex, которая автоматически регистрирует модули для вас на основе файлов, которые вы создали в папке «Модулей». Структура папки выглядит примерно так:
Тем не менее, вы должны иметь государство, полученные, действия и мутации все в одном файле. Я сам предпочитаю их в отдельных файлах, так как нет необходимости прокручивать весь код, чтобы найти определенную вещь, особенно поскольку модули Vuex иногда могут стать довольно большим. Следовательно, мы изменим код из котельной, чтобы вместо этого мы могли иметь наши модули в соответствующих папках.
Достаточно объяснения, давайте начнем с бизнесом. Создайте новый проект, используя Vue-CLI 3. Вы можете найти все инструкции по адресу https://cli.vuejs.org/. Когда у вас есть настройка котельной, установите Vuex и Lodash, запустив NPM Установите Vuex Lodash – Сохранить в своем терминале. Нам понадобится функция «CameLCase» из Лоташа для наших модулей. Теперь создайте структуру папки и файла, как на изображении выше.
Давайте начнем с файла Store.js.
Вы можете увидеть, что мы импортируем на Top Vue и Vuex, поскольку, конечно, им требуются. Мы также импортируем модули из «/Modules/index.js». Позже мы инициализировали магазин, а также петлю через все модули. Если модуль имеет действие, называемое «init», то он будет инициализирован. Это действительно полезно, когда определенный модуль должен быть инициализирован в начале приложения. Позже, конечно, мы экспортируем магазин, который затем обычно импортируется в файл «Main.js» и добавлен в экземпляр VUE.
Сейчас самое время модифицировать файл index.js, который находится в каталоге ‘/Store/Modules’.
Нам нужно импортировать функцию «камера» из Лодаша. Тогда мы используем «потребовать .Context», чтобы потребовать наших модулей. В качестве третьего параметра мы передаем REGEX, который отфильтровал файл index.js, а также файлы, которые имеют «действия», «мутации» и «Getters» в их имени. Они будут импортированы в «Государственный» файл, например «auth.js», а затем экспортируют. Например, вот как можно было бы выглядеть файл «auth.js» в SRC/Store/modules/auth/auth.js ‘.
Теперь единственное, что осталось сделать, это петлю через все наши модули и построить один объект со всеми из них. Мы должны исключить любые файлы, которые имеют «единицу» в их имени, так как это только для испытаний, а не для разработки или добычи. После этого мы добавляем новое свойство на объект «модулей», которые будут иметь название файла «Государственный», например, «Auth» или «пользователи». Мы также используем функцию «CameLCass», чтобы убедиться, что имена свойств будут соответствующими. В результате «потребности) – это массив имена файлов, мы доступаем к соответствующему файлу состояния и распределите объект, который он экспортировал.
Вот как вы можете настроить свой проект, чтобы иметь возможность сохранить ваше государство, Getter, действия и мутации отдельно и хорошо организованными. Вы можете найти репо с кодом здесь. В части 2 этой статьи вы увидите, как создать сценарий для автоматического создания модулей Vuex с одной строкой командой в терминале. Вы можете найти это здесь .
Другие показания:
Создание компонента управления клавиатурой списка с Vue.js и Scoped Slots
Intro в API API React Context
Современные функции JavaScript, которые вы должны использовать каждый день для лучшего развития и какие проблемы они решают.
Как создать шатунную анимацию для страстического списка в Vue.js