Поскольку я пробовал это один раз, и, похоже, он компилируется, я считаю, что теперь я имею право рассказать вам, как вы должны писать свой код, используя TypeScript с Vue и Vuex, давайте начнем.
Зачем мы это делаем?
Intellisense VSCode не имеет никакого представления о типах в Vuex и, что хуже всего, когда вы пытаетесь отправить событие, вы понятия не имеете, какой должна быть полезная нагрузка.
Изучение проблемы
Давайте не будем усложнять и скажем, что у вас есть Компонент класса Vue. Как вы связываете TypeScript с Vuex, вы можете использовать vuex-class. Нет! Он не знает, какого типа методы, что возвращается или что-то в этом роде. Тип теряется в духе…..
Так что мы можем сделать?
Что я нашел (Repo)
Для магазина Vuex
Если вы используете vuex-module-decorators
Вы можете сделать магазин похожим на следующее или использовать изображение в качестве референса. У вас будет проверка типов для хранилища Vuex, теперь нам просто нужно связать его с компонентом.
Примечания
Штат
Все в этом объекте совпадает с состоянием. Итак, в этом примере имя и фамилия находятся в состоянии.
Геттеры
Вы объявляете геттеры, добавляя публичную функцию, которая является геттером. Иди разберись.
Мутации
Вы объявляете мутацию с помощью декоратора @Mutation. Сладкий.
Действия
Вы объявляете действие с помощью декоратора @Action, и если вы хотите, чтобы оно зафиксировало мутацию после завершения асинхронного вызова, добавьте параметры, показанные ниже. Возвращаемое значение — это то, что входит в полезную нагрузку мутации. Я бы сказал, что эта часть шаблона нуждается в улучшении.
Компонент Vue
Вы можете сделать компонент наподобие следующего или использовать изображение в качестве референса. Вы увидите, как они связаны.
Шаги
Импорт
импортируйте хранилище, которое вы хотите использовать, и vuex-module-decorators getModule
Объявить
запустите getModule с хранилищем, это позволит отложенную загрузку хранилища, и если вы просто добавите какхранилище, у вас будет проверка типов для этого хранилища.
Примечания
Если вы добавите хранилище непосредственно в переменную класса, вам не нужно отображать какие-либо геттеры или состояние.
Заключение
У нас может быть проверка типов с помощью Vue и Vuex с включенной ленивой загрузкой, и это здорово.
Источники
Из этих постов я пришел к этому шаблону.
Использование vue-class-component
тип-безопасное-vuex-состояние-использование-в-компонентах-без-декораторов
Использование классов Vue с TypeScript
