Автор оригинала: Thomas Findlay.
Это вторая часть «vuex – настройка предприятия», в которой вы увидите, как создать сценарий для автоматического создания модулей Vuex. Если вы не прочитали первую часть, вы можете найти ее здесь.
Давайте начнем с создания новой папки в нашем каталоге проекта, называемых «скриптами», а внутри его создают файл «GenerateVueXModule.js». Если у вас не установлено Node.js, то пришло время получить его на машине. Нам нужно будет установить только одну зависимость через терминал, который является «Chalk», для красиво окрашенных консольных журналов, так что запустите «NPM Install – Save-Dev Chalk».
Шаг 1
В файле «GenerateVueXModule.js» нам необходимо требовать 3 модуля: «FS», «PATH» и «CHALK», а также объявить модули PATH ‘SRC/Store/Modules’ и пройдены аргументы.
Шаг 1
Как вы можете увидеть на изображении, мы нарезаем список аргументов, поскольку мы не хотим получать первые два параметра, которые являются путями файлов Node.exe и путь файла. Мы заинтересованы только в третьем параметре – имя для нового модуля. Кроме того, у нас есть функции «ошибки» и «успех», которые используют «мел», упомянутые выше, чтобы отобразить цветное сообщение. Нам также необходимо проверить длину args в случае, если бы не было пропущено имя. Поэтому, если вы попытались запустить этот скрипт, как «Node GenerateVuexModule.js», вы должны увидеть ошибку в терминале.
Шаг 2
На данный момент у нас есть имя для модуля и модулей, однако, мы должны получить имя из списка аргументов, а также построить весь путь для модуля и контента для него.
Шаг 2
Имя модуля должно быть сейчас в индексе 0 в «args» Const, так как мы нарезали процесс args, и мы проверили на длину нового списка. Мы также создаем целый путь, используя модуль «Путь» узла и функции объединения. Мы получаем текущий путь каталога с «__Dirname», и мы также должны перемещать один каталог, поскольку файл «GenerateVuexModule.js» находится в каталоге «Screpts». Затем мы просто добавляем модуль, который мы определили ранее, и имя модуля. Const ‘Modulepath’ теперь должен быть что-то вроде «PathtoyourProject/Project/Src/Store/Modules/ModuleName. Вот где будет создан модуль. Поскольку у нас есть полный путь, теперь мы можем проверить, будет ли этот каталог уже существует. Мы не хотели бы перезаписать существующий модуль случайно. Следовательно, если этот каталог уже существует, когда мы пытаемся создать новый модуль, мы получим хорошее сообщение об ошибке.
Следующее, что нужно сделать, это создать константы, которые будут иметь контент для наших файлов. Как вы можете догадаться, «StateContent» предназначен для государственного файла, например «Auth.js» и «ExportFileContent» предназначен для «getter.js», «actions.js» и «мутации .js», если вы хотите, вы можете добавить что-либо еще, вы можете найти полезные для ваших проектов. Я сам также люблю использовать такие типы констант для имен функций.
Шаг 3
Шаг 3
Последний шаг, который мы должны сделать, это создать пути для наших файлов модулей и создать их. Сначала мы определяем 4 константа, каждый удерживающий путь к соответствующему файлу. После этого нам нужно создать наш каталог модулей. Мы проверили, если это существует раньше, поэтому на данном этапе не должно быть проблем. Наконец, мы добавляем новые файлы в вновь созданном каталоге, а затем отображаем сообщение об успехе. В терминале Перейдите в каталог «Сценартики» и просто запустите «Node GenerateVuexModule.js YourModuleName». Вы должны увидеть сообщение успеха, которое ваш модуль был сгенерирован.
Это оно! После прохождения обеих статей вы должны иметь приятную настройку для Vuex, а также иметь скрипт для легко генерации модулей Vuex. Вы можете найти репо с кодом здесь Отказ
Другие показания:
Создание компонента управления клавиатурой списка с Vue.js и Scoped Slots
Intro в API API React Context
Современные функции JavaScript, которые вы должны использовать каждый день для лучшего развития и какие проблемы они решают.
Как создать шатунную анимацию для страстического списка в Vue.js