Vuex4结合TypeScript使用模块时store状态类型报错如何解决

问题原因 #

你定义的RootState类型没有手动声明已注册模块的状态结构，Vuex 4 的 TS 类型不会自动合并模块的状态声明到根状态类型，因此会抛出类型错误。

解决方案 #

直接在RootState中补充对应模块的状态类型，字段名和你注册模块时的key保持一致即可，修改后的完整代码如下：

import { createStore, Module, Store, useStore as baseUseStore } from 'vuex'
import { InjectionKey } from 'vue'

type SessionState = {
  lastSeen: number
}

// 根状态类型手动加入所有注册模块的状态
type RootState = {
  appID: string
  session: SessionState
}

const session: Module<SessionState, RootState> = {
  state: () => ({ lastSeen: -Infinity })
}

// （可选）定义Vue注入用的key，配合自定义useStore避免每次调用都传泛型
export const storeKey: InjectionKey<Store<RootState>> = Symbol()

export const store = createStore<RootState>({
  state: () => ({ appID: 'r2d2' }),
  modules: {
    session
  }
})

// （可选）自定义带类型的useStore工具函数
export function useStore() {
  return baseUseStore(storeKey)
}

// 现在可以正常读取，类型识别正确
const s2 = store.state.session

修改后store.state.session会被正确识别为SessionState类型，不需要加//@ts-ignore注释。

如果不需要在组件中用useStore，可以省略注入key和自定义useStore的部分，只修改RootState的定义即可解决问题。

内容的提问来源于stack exchange，提问作者philipp