typescript - 如何为 Vuex 定义 VueJS3 Typescript 接口

Question

我有一个带有 Typescript 和 Vuex 4 的 VueJS 3 项目。我按照Vuex中的描述创建了商店。

如何在 state.ts 中定义我的接口，以便Array<Athletes>在“state”-Object 中正确实现？？？

// store.ts 
import {InjectionKey} from "vue"
import {createStore, Store, useStore as baseUseStore} from "vuex"
import {State} from "../interfaces/state";

export const key: InjectionKey<Store<State>> = Symbol()

export const store = createStore<State>({
    state: {
        athletes: [],
    },
    ...
});

export function useStore() {
    return baseUseStore(key)
}


// state.ts 
// Interface for the store
import {Athlete} from "./athlete"; // Athlete Interface

export interface State {
    athletes: Array<Athlete>
}

标签： typescriptvue.jsvuejs3