Я создаю SPA с Typescript и Vue и хочу использовать Vuex для управления магазином и «традиционные» компоненты с одним файлом (а не компоненты с классовым стилем).Когда я ссылаюсь на мой магазин, в моем компоненте:
// file: src/components/MyComponent.ts
import store from "@/store";
import { mapState } from 'vuex';
computed: {
sortedList() {
let sorted: Array<Item> = this.$store.items.slice(0);
if(this.sortBy === 0) {
sorted.sort((a: Item, b: Item) => {
return a.sort1 === b.sort1 ? 0 : (a.sort1 ? -1 : 1)
});
}
return sorted;
},
...mapState(['items'])
},
я получаю ошибку: TS2339 Свойство 'items' не существует в типе 'Store'
Я объявил интерфейс для своего магазина:
// file: src/types/index.ts
export interface Item {
id: number,
sort1: string,
timestamp: number
}
export interface RootState {
items: Array<Item>
}
И определили мой магазин как
// file: src/store.ts
import {Item, RootState} from "@/types";
const store: StoreOptions<RootState> = {
//........
//........
//........
export default new Vuex.Store<RootState>(store);
Все еще бесполезно ... Что-то мне не хватает?Я вижу, что с компонентами в стиле класса я должен был бы использовать @State, который, я полагаю, недоступен без классов.
Примечание: я знаю, что с mapState
я мог бы использовать store.items
вместо this.$store.items