本文介绍了带有TypeScript的Vuex地图函数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个用于我的状态(游戏命名空间)的接口,如下所示:
interface GameState {
selectedTab: number;
timeout: number;
snackbar: boolean;
text: string;
doneTasks: number;
taskTypes: TaskType[];
stages: Stage[];
}
我正在尝试使用mapState在组件内映射"taskTypes",如下所示:
...mapState('game', {
taskTypes: (state: GameState): TaskType[] => state.taskTypes,
}),
我得到以下错误:类型为‘{taskTypes:(state:GameState)=>;TaskType[];}’的参数无法分配给类型为‘string[]’的参数。&q;
将函数的";state";参数类型定义为‘any’时,它会编译并运行,因此我尝试调试DevTools中的那个函数,看看";state";参数包含什么,它保存我的游戏状态,它具有在GameState接口中定义的完全相同的道具。
有没有人知道为什么ts不让我用正确的类型定义";state";参数(这就是首先定义接口并避免‘any’的全部目的)
这也不起作用:
...mapState({
taskTypes: ({ state }: Store<GameState>): TaskType[] => state.taskTypes,
}),
有没有人遇到过这样的问题?有没有什么好办法来处理这个问题?
适用于mapActions等.
更新 我尝试为我的存储和模块提供更好的类型。目前,它们如下所示: 主商店:
export default new Store<RootState>({
modules: {
users,
game,
},
});
RootState为:
export interface RootState {
game: GameState;
users: UserState;
}
游戏模块:
type GameActionContext = ActionContext<GameState, RootState>;
const gameModule: Module<GameState, RootState> = {
namespaced: true,
state: {
selectedTab: 0,
timeout: 5000,
snackbar: false,
text: '',
doneTasks: 0,
taskTypes: [...],
stages: [...],
} as GameState,
mutations: {/*Mutations*
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!