Отчасти привлекательность Vuex как библиотеки управления состоянием заключается в ее простоте, легкости внедрения и гибкости.
Как и в случае с Vue, вы можете зайти так далеко, как захотите. Разместите ссылку CDN на странице и используйте глобальные переменные? Конечно. Сделать типобезопасным? Конечно.
К сожалению для пользователей Typescript, Vuex из коробки не обеспечивает безопасность типов. Рекомендуемый метод диспетчеризации действий, фиксации мутаций и доступа к геттерам основан на сопоставлении строк и произвольных ссылках на ключи объектов.
Например, в большинстве приложений Vue компоненты, подключенные к магазину, вероятно, выглядят примерно так:
export default {
emitAction() {
this.$store.dispatch("actionName", { actionPayload: "OK" });
}
computed: {
getStoreValues() {
return this.$store.getters.storeValues;
}
}
}
Это вводит некоторые проблемы в области машинописных текстов ...
А именно, «свойство $ store не существует для типа this».
Вы всегда можете заставить компилятор разрешить это, приведя «this» к «any», но ...
С таким же успехом вы можете не писать Typescript.
Введите, vuex-typex,
Vuex-typex - это небольшая библиотека, которая представляет твердый шаблон для написания хранилищ Vuex в Typescript.
Основной метод, экспортируемый из vuex-typex, - это getStoreBuilder. Этот метод делает несколько вещей, а именно:
- Регистрирует действия, мутации и геттеры в вашем глобально доступном магазине.
- Возвращает типизированную версию действия, мутации или метода получения, которые будут использоваться в вашем приложении.
Что оно делает
Внутри вы по-прежнему получаете доступ к методам Vuex с помощью строковых литералов и произвольных объектных ключей; НО, вы экспортируете типобезопасные функции в файлы Typescript.
Думайте о библиотеке как о адаптере между вашим динамически типизированным хранилищем Vuex и вашим статически типизированным проектом Typescript.
Например, в приведенном ниже надуманном примере -
import { getStoreBuilder } from 'vuex-typex'
import { ActionContext } from 'vuex';
import { RootState } from './RootState' // Typed root state
import ApiClient from './../ApiClient';
// Typed initial state of this module
type UserModule = { username: string };
const initialState: UserModule = { username: "" };
const userModule = getStoreBuilder<RootState>("userModule",
initialState);
function loginUser(context: ActionContext<UserModule, RootState>, payload: { username: string }) {
return ApiClient.login(username).then((resp) => resp.data);
}
const user = {
dispatchLoginUser: userModule.read(loginUser)
};
export default user;
Дает вам полную безопасность типов, импортированную в другой модуль:
Это отличная новость для пользователей Typescript, которые все еще хотят использовать Vuex.
Где я могу зарегистрироваться?
Лучший источник информации о проекте - это Github. Там автор приводит пример полнофункционального хранилища Vuex, написанного на Typescript.
