Comments 20
Так самое-то важное, а как затипизированы commit и dispatch?
export type Category {
attributes: {
hasPrice: boolean;
icon: string;
lvl: number;
name: string;
slug: string;
};
id: number;
}
export interface IParams {
city_id: number
}
class AppState {
categories: Category[] = [];
}
/* ... */
class AppMutations extends Mutations<AppState> {
setCategories(categories: Category[]) {
this.state.categories = categories;
}
}
class AppActions extends Actions<
AppState,
AppGetters,
AppMutations,
AppActions
> {
async getCategories({params}: {params: IParams}): Promise<Category[]> {
return categoriesAPI.get({params}).then(
({ data: categories }: { data: Category[] }) => {
this.commit("setCategories", categories);
return categories;
}
);
}
}Обновил статью. Спасибо, что указали на промах.
Главная проблема типизации в этой строчке:
this.commit("setCategories", categories)
Как вы обеспечиваете гарантию того, что такой mutation действительно существует и принимает именно такой набор аргументов?
Гарантия существования мутации и принимаемых аргументов:
class AppMutations extends Mutations<AppState> {
setCategories(categories: Category[]) {
this.state.categories = categories;
}
}
class AppActions extends Actions<
AppState,
AppGetters,
AppMutations,
AppActions
> { /* ... */ }
Вот пара файлов, в которых можно увидеть, как это реализовано: раз, два.
Мне кажется, что проблема вот тут
this.commit("setCategories12345", categories);
Если в названии мутации написать людей текст, то он будет комплимент, но не будет работать. Это — отсутствие типизация. Почему бы не указывать вместо строкового литерала именно член класса?
ох, я бы сейчас не стал начинать проект на class components, сильно больно будет обновляться на vue 3
ну так я про синтаксис ничего не говорил, но вот в 3 версии искаропки не будет поддержки class api, рисковать ради непонятно чего? нафиг, лучше на объектном синтаксисе делать, что бы потом можно было легко обновится на 3 версию. или, даже лучше, быстро сконвертировать в новый функциональный синтаксис.
А мне было интересно и полезно, спасибо автору за статью (:
До этого работал с Vue только в связке с Flow, т.к. осознание преимущества типизации зашло не сразу (не у меня, у тиммейтов), а переделывать было уже некогда. Теперь вижу как можно подружить Vue с TS и первое впечатление крайне положительное (:
Мощный модуль для типизации Vuex