TypeScript-vuex中的一些使用技巧

当我们希望在vue组件中使用useStore,并想为它指定类型来保证它更安全时,会出现一些问题,

举个栗子:

 

 这是一个模块化的store,当我们希望使用子模块的类型时,

 

 而在index.ts下同样拿不到子模块的类型,

解决方案:

新建一个接口,包含子模块的类型,

再定义一个接口来结合index.ts中的state的类型和子模块中state的类型,就像这样

 

 在index.ts中导出一个名为useStoreP的函数,为它指定返回值类型时Store<IStoreType>,

 

 在我们希望使用它的组件内

 

 这样就完成了.

----解释一下代码是啥意思-----

由于vuex中的useStore指定不了子模块中的类型,所以我们要自己建立一个函数来使useStore可以返回一个类型是子模块类型的Store,

这里的类型指定的是Store中state的类型,我们可以来看一下源码

 

-----------------------更新一下---------------------------------

 

我发现vuex官方文档里已经提供API来解决这个问题了[手动滑稽]

TypeScript 支持 | Vuex (vuejs.org)