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

来源：6-11 Vuex 整合当前应用

ForCoke

2022-05-02

老师，我用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也能具备类型？

写回答

1回答

张轩

2022-05-03

同学你好

可以这样，

// 导出这个对应的类型，只给 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

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

2022-05-04

共2条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目，率先掌握 vue3 造轮子技能

3203 学习 · 2363 问题

查看课程

相似问题

vuex,模块化怎样指定类型？

回答 2

关于泛型

回答 1

为什么老师把ajax请求写到store里面？

回答 1

pinia是否可以整合多个模块？

回答 1

为什么不能在页面直接写axios去请求接口，要在action里面请求。

回答 1

打开慕课网App查看更多内容