Vuex - это официальная библиотека управления состоянием для Vue.js с действительно отличной документацией. На мой взгляд, его гораздо удобнее использовать, чем Redux, поскольку он требует меньше стандартного кода и поддерживает асинхронные действия без каких-либо дополнительных библиотек. Более того, поскольку он разрабатывается основной командой Vue.js, он очень хорошо интегрируется с Vue. К сожалению, иногда правильная настройка все еще может быть узким местом для некоторых. Член основной команды Vue.js Крис Фриц создал отличный шаблон для Vue, который вы можете найти по адресу https://github.com/chrisvfritz/vue-enterprise-boilerplate. Он имеет отличную настройку Vuex, которая автоматически регистрирует модули для вас на основе файлов, которые вы создали в папке modules. Структура папок выглядит примерно так:
Однако вы должны иметь состояние, геттеры, действия и мутации в одном файле. Я предпочитаю хранить их в отдельных файлах, так как нет необходимости пролистывать весь код, чтобы найти конкретную вещь, тем более, что модули Vuex иногда могут становиться довольно большими. Поэтому мы изменим код из шаблона, чтобы вместо этого мы могли размещать наши модули в соответствующих папках.
Хватит объяснений, приступим к делу. Создайте новый проект с помощью vue-cli 3. Вы можете найти все инструкции на https://cli.vuejs.org/. Когда у вас есть шаблонная установка, установите Vuex и Lodash, выполнив команду npm install vuex lodash - save в своем терминале. Для наших модулей нам понадобится функция camelCase из lodash. Теперь создайте структуру папок и файлов, как на изображении выше.
Начнем с файла store.js.
Вы можете видеть, что мы импортируем Vue и Vuex сверху, поскольку они, конечно, необходимы. Мы также импортируем модули из «/modules/index.js». Позже мы инициализировали хранилище, а также перебрали все модули. Если в модуле есть действие под названием «init», он будет инициализирован. Это действительно полезно, когда определенный модуль должен быть инициализирован при запуске приложения. Позже, конечно, мы экспортируем магазин, который затем обычно импортируется в файл «main.js» и добавляется в экземпляр Vue.
Пришло время изменить файл index.js, который находится в каталоге «/ store / modules».
Нам нужно импортировать функцию «camelCase» из lodash. Затем мы используем «require.context», чтобы требовать наши модули. В качестве третьего параметра мы передаем регулярное выражение, которое отфильтрует файл index.js, а также файлы, в имени которых есть «действия», «мутации» и «геттеры». Они будут импортированы в файл «состояния», например «auth.js», а затем экспортированы. Например, так вначале может выглядеть файл auth.js в src / store / modules / auth / auth.js.
Теперь осталось только перебрать все наши модули и построить из них один объект. Мы должны исключить любые файлы, в названии которых есть «unit», поскольку они предназначены только для тестов, а не для разработки или производства. После этого мы добавляем новое свойство к объекту «modules», которое будет иметь имя файла «состояния», например «Авторизация» или «пользователи». Мы также используем функцию «camelCase», чтобы гарантировать соответствие названий свойств. Поскольку результатом «requireModule» является массив имен файлов, мы получаем доступ к соответствующему файлу состояния и распространяем объект, который он экспортировал.
Вот как вы можете настроить свой проект, чтобы иметь возможность хранить свое состояние, геттеры, действия и мутации отдельно и хорошо организованными. Репо с кодом можно найти здесь. Во второй части этой статьи вы увидите, как создать скрипт для автоматической генерации модулей Vuex с помощью однострочной команды в терминале. Вы можете найти это здесь".
Другое чтение:
Создание компонента управления списком клавиатуры с Vue.js и слотами с ограниченным объемом
Как создать поэтапную анимацию для разбитого на страницы списка в Vue.js
