带有TypeScript的Vuex地图函数

Vuex map functions with TypeScript(带有TypeScript的Vuex地图函数)
本文介绍了带有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*
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

How to do time streching audio playback using javascript in 2019?(如何在2019年用javascrip做时间跨度音频播放?)
initialising a global mixin in weex我使用 weex create awesome-project 初始化了一个 weex 和 vue 应用程序。在 entry.js 文件中,我试图注册一个全局 mix...
Correctly setup Eslint Airbnb with VScode in Vue project这是我没有 linting 的 Vuejs 代码。在我运行 之后 npm run lint --fix代码是这样的但我再次做...
TypeError: Cannot read property 'get' of undefined, Axios, Vue.JS尝试使用 axios 从 api 访问获取请求时,我从 Vue 收到这个奇怪的错误,我收到 TypeErro...
How to call a vue.js function on page load我有一个帮助过滤数据的功能。当用户更改选择时,我正在使用 v-on:change 但我还需要在用户选择数据之前调用该函...
How can I call method in the component from view? (vue.js 2)我的看法是这样的:[cc lang=javascript] England ...