vuex4.0中使用typescript, vuex4.0中modules的ts使用，vue3 + vuex4.0 + typescript 使用详情

最新的vue3.x版本已经发布一段时间了，vue3 + vuex + ts 结合更加完美，简单介绍下在 vuex 中配置ts的一种方式, 下面基于vue3.x + vuex4.x，配置之后只需要实现定义各个 state 的类型, 使用时完全不在需要再次关注，会自动推断。如下图示列中 @ 表示src的别名配置。

一、store文件夹目录介绍如下图所示，store文件夹下一级目录有index.ts 初始化vuex的配置, interface.ts 设置root层state类型, modules用来存放vuex子模块定义；

二、配置介绍，首先定义state顶层数据结构

定义 root 顶层 state 的数据类型， 在store/interface.ts 中，比如我们在state上定义属性 test 的类型, 然后默认导出该类型定义

在 store/index.ts 中，配置顶层store，在调用 createStore 的时候根据将上一步设置的类型定义在此处传递进去 createStore<RootStateTypes>({ ... })

然后需要一个唯一的key，该key在注册store时需要用到,  export const key: InjectionKey<Store<RootStateTypes>> = Symbol('vue-store');。详细如下图所示

该key值的使用，在使用store的时候需要引入，如下图所示，该处use的时候一定要入参第二个参数key

在页面中使用，推荐使用 Composition API，在vue组件setup中使用

import { useStore } from 'vuex';

const store = useStore(key); // 便可实现调用

当然有时候会觉得很麻烦, 每次都要引入key，可以在 store/index.ts中统一导出，如下图所示，使用就可以直接调用了。

其中 baseUseStore 为 import { useStore as baseUseStore } from 'vuex'

import { useStore } from '@/store';

const store = useStore(); // 便可实现调用

到这一步就会发现基本上可以在页面中使用store上的各种方法或者数据了，不需要在定义类型, 也不需要我们在做别的处理， 跟之前this.$store一样的功能

但是，当我们定义了modules子模块后会发现，使用的时候会提示类型报错，如 modules: { testModule { state: {name: age }}}

store.state.testModule.name 调用时就会出现类型报错, 但是值是存在的，可以使用如下方式处理

三、定义 modules 中子模块，以 test 举例

1. 定义 state 数据类型，在store/modules/test/interface.ts中定义，如下所示，有两个字段 name, count

2.定义子模块，在store/modules/test/index.ts 定义子模块，首先引入上述定义的子模块state的数据类型定义 TestModuleTypes，在我们引入vuex中的Module 子模块定义接口，传入参数，从vuex的源码中可查到，第一个泛型参数为当前子模块的state类型定义, 第二个参数为根级state的类型定义，只要定义了state的类型，在所有使用state的地方均会自动推断，不需要在定义，例如下图更改state.count

3.子模块引入使用，关键的一步，首先在 store/interface.ts中增加一个全量的state集成，AllStateTypes，extends至根节点 的 RootStateTypes，将test子模块的类型定义引入，并在该处定义便可，这里的键 testModule 为接下来将在store/index.ts中引入的键定义，如下图所示，新增类型定义，后续如果新增一个模块均在此全量的 AllStateTypes 新增便可

4. 在 store/index.ts中的处理，在modules中引入 testModule子模块，在 baseUseStore 中我们需要手动传入泛型，baseUseStore<AllStateTypes>(key)，这样，项目中就能使用所有的状态数据不会提示报错也不要在每个地方定义了，当然，如下图所示，我们保留泛型的传入，将默认的类型定义为 AllStateTypes 也是可以的

在使用的时候，从 @/store中引入useStore, 可以直接调用子模块的各个数据，当然也可以使用commit, dispatch等方法进行处理，如下图demo所示

总结：建议state类型定义单独放在一个文件中处理，方便管理，各个子模块的类型定义单独放在子模块的文件夹中处理，最后统一在根节点上 集成便可，当然，如果有很多公用的类型可以抽取出来。以上便是使用vuex4.x结合typescript的使用心得，欢迎指正！