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

Question

老师您好！
vuex,我分了几个模块，每个模块是一个单独的store，请问怎样给模块指定类型，在别的地方使用store时，提示到模块就没有了。

Answer 1

张轩 2022-10-06 09:23:40

同学你好 我的例子不是单个文件的 是多个文件的，我再简单写一遍，你再理解一下。

首先在 store/index.ts 当中

// 创建一个全局的类型，这个类型包括了所有子模块的类型
import { IuserState } from './user'
export interface GlobalDataProps {
   // 每个模块的类型都导入进来 
    user: IuserState;
    global: GlobalStatus;
    ... 可以更多
}

// 创建全局的 store，注意这里会使用这个全局的类型传入泛型
 export default createStore<GlobalDataProps>({
    modules: {
        user,
        global
    },
});

然后是每个模块当中，这里用 User 举例，user.ts

// 要使用 Module 类型, 它可以很方便的给你的 module 添加类型
import { Module } from 'vuex'
import {  GlobalDataProps } from './index'
// 定义module 的时候接受两个泛型，第一个是自己的类型，第二个是全局的类型，
// 你使用以后就会发现里面的各种参数获得对应的类型了， 不用想你图中那样手动指定了。
const user: Module<IuserState, GlobalDataProps> = {
    state: ...
    mutations: {
        setToken(state, token) {
            // 这里你会发现 state 不用指定类型也会获取对应的类型
        }
    }
}

在外面使用 store 的时候，比如某个 vue 文件中

import { GlobalDataProps} from '../store'
const store = useStore<GlobalDataProps>()
// 这样就可以获取 store 的类型了

• 提问者 慕尼黑8466541 #1

  感谢老师的耐心并精彩的回复，谢谢您了

Answer 2

张轩 2022-10-05 09:32:11

同学你好

我在项目中都是这样做的。

// 先说 index.ts
// 单独添加一个对应的全局type，如下
export interface GlobalDataProps {
   // 每个模块的类型都导入进来 
    user: UserProps;
    global: GlobalStatus;
    ... 可以更多
}

// 创建全局

export default createStore<GlobalDataProps>({
    modules: {
        user,
        global
    },
});

// 使用的时候使用全局类型即可

// 在说单个文件
// 要使用 Module 类型
import { Module } from 'vuex'
// 定义module 的时候接受两个泛型，第一个是自己的类型，第二个是全局的类型，
// 你使用以后就会发现里面的各种参数获得对应的类型了， 不用想你图中那样手动指定了。
const user: Module<UserProps, GlobalDataProps>

亲测可用

• 提问者 慕尼黑8466541 #1

  老师您好，单个文件内写不来，能否写个例子