Это вторая часть Vuex - настройка предприятия, в которой вы увидите, как создать сценарий для автоматической генерации модулей vuex. Если вы не читали первую часть, вы можете найти ее здесь.
Давайте начнем с создания новой папки в каталоге нашего проекта под названием «scripts» и внутри нее создадим файл «generateVuexModule.js». Если у вас не установлен Node.js, пора установить его на свой компьютер. Нам нужно будет установить только одну зависимость через терминал, «chalk», для красиво окрашенных журналов консоли, поэтому запустите «npm install - save-dev chalk».
Шаг 1
В файле «generateVuexModule.js» мы должны потребовать 3 модуля: «fs», «path» и «chalk», а также объявить путь к модулям «src / store / modules» и получить переданные аргументы.
Как вы можете видеть на изображении, мы разрезаем список аргументов, поскольку мы не хотим получать первые два параметра, которые представляют собой пути к файлу node.exe и путь к файлу. Нас интересует только третий параметр - имя нового модуля. Кроме того, у нас есть функции «ошибка» и «успех», которые используют упомянутый выше «мел» для отображения цветного сообщения. Нам также нужно проверить длину аргументов на случай, если имя не было передано. Поэтому, если вы попытались запустить этот сценарий как «node generateVuexModule.js», вы должны увидеть ошибку в терминале.
Шаг 2
На данный момент у нас есть имя для модуля и modulesPath, однако мы должны получить имя из списка аргументов, а также построить полный путь для модуля и его содержимого.
Имя модуля теперь должно быть с индексом 0 в 'args' const, поскольку мы нарезали аргументы процесса и проверили длину нового списка. Мы также строим полный путь, используя модуль «path» узла и функцию соединения. Мы получаем текущий путь к каталогу с помощью «__dirname», и нам также нужно переместить один каталог вверх, поскольку файл «generateVuexModule.js» находится в каталоге «scripts». Затем мы просто добавляем модуль modulesPath, который мы определили ранее, и имя модуля. Константа ‘modulePath’ теперь должна иметь вид ‘pathToYourProject / project / src / store / modules / moduleName. Вот где будет создан модуль. Поскольку теперь у нас есть полный путь, мы можем проверить, не существует ли этот каталог. Мы бы не хотели случайно перезаписать существующий модуль. Следовательно, если этот каталог уже существует, когда мы пытаемся создать новый модуль, мы получим приятное сообщение об ошибке.
Следующее, что нужно сделать, это создать константы, которые будут иметь контент для наших файлов. Как вы, наверное, догадались, «stateContent» предназначен для файла состояния, например «Auth.js» и «exportFileContent» предназначены для «getters.js», «actions.js» и «mutations.js». При желании вы можете добавить все, что может оказаться полезным для ваших проектов. Я тоже люблю использовать константы типов для имен функций.
Шаг 3
Последний шаг, который нам нужно сделать, - это построить пути для наших файлов модулей и создать их. Сначала мы определяем 4 константы, каждая из которых содержит путь к соответствующему файлу. После этого нам нужно создать каталог нашего модуля. Мы проверили, существует ли он раньше, поэтому на данном этапе проблем возникнуть не должно. Наконец, мы добавляем новые файлы во вновь созданный каталог и затем отображаем сообщение об успешном завершении. В терминале перейдите в каталог «scripts» и просто запустите «node generateVuexModule.js yourModuleName». Вы должны увидеть сообщение об успешном создании вашего модуля.
Вот и все! После прочтения обеих статей у вас должна быть хорошая установка для Vuex, а также сценарий для простой генерации модулей Vuex. Репо с кодом можно найти здесь.
Другое чтение:
Создание компонента управления списком клавиатуры с Vue.js и слотами с ограниченным объемом
Как создать поэтапную анимацию для разбитого на страницы списка в Vue.js
