На момент написания этой статьи Vue 3.0 достиг своего первого стабильного v3.0.0 'One Piece ', а Vuex 4 находится в v4. 0.0-beta.4.
К сожалению, пока нет официальных примеров использования модулей Vuex 4 в TypeScript ...
В качестве дополнительного требования я хочу, чтобы состояние модулей, мутации, методы получения и действия сохранялись в их собственных файлах. Это упрощает управление кодом при росте этих модулей.
Мне удалось собрать репозиторий рабочих примеров в Github и Codesandbox.
Используя примеры из этих ресурсов:
- Vuex + TypeScript от Эндрю в Dev.to
- Gist javisperez / index.ts
- Repo andrewvasilchuk / vuex-typescript
- < / а>
- Полное руководство по отображению в Vuex с помощью LogRocket
Однако еще предстоит решить несколько проблем:
1. Устранение ошибок линтинга цикла зависимостей
В настоящее время набор текста в модулях index.ts, actions.ts и getters.ts зависит от импорта RootState из основного хранилища.
При использовании конфигурации линтинга ESLint Airbnb я сталкиваюсь с такими ошибками линтинга (в настоящее время отключены // eslint-disable-next-line правилами в репо и примере):
Dependency cycle via @/store/modules/profile > eslint(import/no-cycle)
Хотя это, похоже, не влияет на фактическое функционирование магазина (или влияет?), Я хотел бы знать, как преодолеть это, не отключая правило или не используя // eslint-disable-next-line import/no-cycle в этих строках?
Я не пробовал, происходит ли это с конфигурациями линтеров Standard и Prettier, или это связано с правилами Airbnb?
2. Как сделать так, чтобы модуль не работал?
Я попытался настроить модуль профиля без использования каких-либо действий, однако мне не удалось получить права типов.
В настоящее время пример кода включает один тип действия NON_ACTION ...
3. Как правильно использовать параметр модуля namespaced: true и как он влияет на синтаксис использования в компонентах?
В настоящее время хранилище профилей настроено с namespaced: true. В App.vue я демонстрирую это с помощью mapGetters, который принимает имя модуля в качестве первого параметра. Это работает.
Однако в модуле документов нет этой опции, потому что отправка с типом действия больше не работает. Кажется, его нужно использовать с другим вариантом синтаксиса, который мне не удалось найти.
PS. Любые дальнейшие предложения по доработке кода приветствуются в виде комментариев, ответов и запросов на вытягивание!
Обновление 27/09/20: я только что понял, что Intellisense VS Code не показывает информацию о типе для экземпляра магазина после передачи его из функции useStore при использовании внутри компонента. Работает, если импортировано в .ts файл.
