vuex使用命名空间模块化后如何使得store具备类型？

Question

老师，我用vuex时候，使用了模块化：
user.ts

export interface UserProps{
  isLogin: boolean;
  name?: string;
  id?: number;
}
const user: UserProps = {
  isLogin: false
}

export const userStore = {
  namespace: true,
  state: () => user
}

column.ts

import { testData, testPosts } from '../testData'
export default {
  namespace: true,
  state: () => ({
    columns: testData,
    posts: testPosts
  })
}

index.ts

import { createStore } from 'vuex'
import columnStore from './column'
import { userStore, UserProps } from './user'
import { ColumnProps, PostProps } from '../testData'
// export interface GlobalDataProps {
//   columns: ColumnProps[];
//   posts: PostProps[];
//   user: UserProps;
// }
export interface GlobalDataProps {
  userStore: UserProps
}
export default createStore<GlobalDataProps>({
  modules: {
    columnStore,
    userStore
  }
})
// export default createStore({
//   modules: {
//     columnStore,
//     userStore
//   }
// })

此时通过createStore创建出来的store可以正常的使用，即：store.state.userStore.isLogin
但是，我想要请教一下老师，在这种模块化下，我如何使得我通过createStore创建出来的store实例具有相应的类型？也就是如何使得我的modules甚至我嵌套的modules也能具备类型？

Answer 1

张轩 2022-05-03 10:02:30

同学你好

可以这样，

// 导出这个对应的类型，只给 createStore 的时候当泛型使用
export interface GlobalDataProps {
   columns: ColumnProps[];
   posts: PostProps[];
   user: UserProps;
 }
// 创建 store 的时候就不需要传入 类型了
const store = createStore({
    modules: {
        user,
        columns,
        posts,
    }
})
// 使用的时候，就用这个 interface
const store = useStore<GlobalDataProps>()
// 现在 store 已经可以获取不同的类型了

• 提问者 ForCoke #1

  老师，这样确实可以在读取state的时候获得类型推断，但是还有两个问题，一个是在vuex的模块中，定义各类action或者mutation时，state的类型都是any，第二个问题，这种只在使用useStore时传递泛型那我commit的时候store.commit('userStore/LOGIN')，userStore是modules中的模块名，此时无法找到这个命名空间下的LOGIN mutation

• 张轩 回复 提问者 ForCoke #2

  vuex 有个特殊类型是 Module，可以传入泛型，可以传入当前 state 类型和 global 两种类型，这样。state 和 rootState 就都有类型了，比如
  import { Module } from 'vuex'
  const user: Module<UserProps, GlobalDataProps> = {
  
  }
  // 你会发现 mutation，actions 以及 state 都有类型了。
  第二个问题：介于 vuex 的限制，commit 的名称是没法提示的，只能手写了。