Так получилось, что я начал изучать Vue месяц назад с версии Vue 3. Ранее было заявлено, что Vue 3 был переписан на машинописном языке.
Честно говоря, я ожидал того же самого от новой версии Vuex 4 для Vue 3. Но почему-то все получилось не так, как ожидалось.
Посмотрев репозиторий Vuex 4 https://github.com/vuejs/vuex/tree/4.0 Мы вдруг увидим, что он написан на js и в самом конце написаны типы для готового кода.
С одной стороны, нам, как пользователям, все равно, как написан код — главное, чтобы им было удобно пользоваться.
И вот тут-то начинающий пользователь сразу попадает в странную ситуацию при попытке использовать машинопись для управления типами создаваемых объектов магазина.
Дело в том, что типизация созданного хранилища во Vuex 4 полностью отсутствует. Ну да ладно, подумал я и начал искать решение.
VUE 2 предлагает элегантные решения на основе декоратора, например это .
Если мы посмотрим исходный код проекта, то увидим, что он был разработан для "vue": "> =2" и "vuex": "3" Использование декораторов во Vue 3 основано на библиотеке компонент vue-класса , документация по которому на данный момент даже не выпущена.
Таким образом, использование декораторов для набора текста Vuex 4 для Vue 3 на мой взгляд на данный момент выглядит сложной затеей и я решил отказаться от использования декораторов для набора текста.
Решение, которое я предлагаю, основано на на проекте И статья .
Метод, предложенный Андреем, на мой взгляд, требует большого количества дополнительного кода и на основе его кода я реализовал свое решение.
Основные моменты
Я решил сделать магазин «одним целым», но разделить на файлы по общим функциям.Соответственно, в разных файлах модулей я предлагаю добавлять к сущностям специальные префиксы.
Например, для той части магазина, которая реализует авторизацию — auth.ts, ко всем функциям можно добавить префикс auth. Согласен, что в таком подходе есть некоторое неудобство — а именно, контроль уникальности имен ложится на разработчика (но если вы допустите ошибку, машинописный компилятор вам все подскажет).
Это решение было принято потому, что я не смог описать стандартную концепцию модулей Vuex. Основная идея состоит в том, чтобы создать новые типы из типов Vuex с помощью Omit и переписать существующие типы Vuex для мутаций, действий и геттеров.
В репозитории находится основной файл магазина — index.ts и файлы плагинов (не модулей Vuex в стандартном понимании), в которых разрабатывается некоторая своя логика (в примере счетчик и аутентификация).
Для мутаций я несколько упростил задачу и все мутации должны возвращать void. Для действий я поддерживал ввод полезных данных и значения, возвращаемого действием.
Ввод текста основан на машинописном тексте 4 — функции именованных кортежей.
В файлах примеров я пометил неизменяемую часть кода комментариями, остальной код вы пишете сами, аналогично неизменяемую часть шаблона я выделил в index.
Зависимости
Мой проект компилируется только в среде typescript 4 — взгляните на ваш package.json. При создании проекта с использованием vue-cli по умолчанию устанавливается typescript версии 3. Вам нужно либо использовать утилита ncu или самостоятельно заменить версию в package.json на > 4.0 (на момент написания последней версией машинописи была 4.1.3).
И, конечно же, не забудьте удалить файл package-lock.json и запустить команду установки npm.
Как использовать
Скачать проект .В каталоге src вы найдете папку магазина — скопируйте ее в свой проект. Убедитесь, что в вашем проекте установлена версия машинописного текста > = 4. В файле InitialState.ts введите начальные значения — они же являются типами для состояния.
Для нормальной типизации состояния следует учитывать, что используется способность машинописного текста выводить типы из значений.
Например, если вы хотите использовать массив и начальное значение для него планируется пустым, то напишите его так — на примере пользователей:
В основном файле - index.ts подключайте свои модули по приведенному примеру - после строки "код без изменений" идет часть кода, которую нельзя изменить.export const initialState = { counter: { counter: 0, }, auth: { name: "Ivan", idUser: "89annsdj77", email: "[email protected]", users:[] as Array<string> }, };
В папке модулей создайте нужные вам файлы — модули с вашей логикой (это не модули Vuex — они просто делят вашу логику на группы).
Внутри каждого модуля есть неизменяемый фрагмент кода (шаблон), который всегда должен быть рядом.
Этот шаблон начинается со строки «Действия без кода изменения» и продолжается до конца модуля.
Далее в каждом модуле необходимо описать типы Getters, ActionsPayload, MutationPayload по шаблонам, приведенным в файле counter.ts. Также необходимо реализовать и экспортировать сам функционал мутаций, геттеров, действий действий.
Пример использования магазина был приведен в компоненте HelloWorld. P.S. Буду рад, если вы поставите моему проекту звездочку на github. Теги: #vue.js #vue #vuex
-
Волоф
19 Oct, 24 -
Выпущен Netbeans 6.9 Milestone 1
19 Oct, 24 -
Мастера Маскировки: Охотничьи Буткиты
19 Oct, 24 -
Дайджест Мблт Дев :: Выпуск №200
19 Oct, 24
