vuex4中的useStore的类型限定

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）

在vuex4中，想要在setup中使用这个store的内容，就需要借助 useStore这个函数

类型定义：

export function useStore<S = any>(injectKey?: InjectionKey<Store<S>> | string): Store<S>;

返回值：

store的实例对象

Store接收一个泛型 S， 其实看看内部的类型结构，这里的S 就是指的是 state中的类型

在组件中使用useStore

import { useStore } from 'vuex'

const store = useStore()
//这样写的话，在组件中，就默认state的类型为any, 但是我们肯定想要的不是any
//因为这样没有任何类型的提示，就算存在undefined，也不知道

解决办法：

自定义一个useStore函数

//  store/index.ts

import { useStore as vuexStore } from 'vuex'
export function useStore(): Store<IStoreType> {
    return vuexStore()
}

interface IRootState {
    //根store中的state的类型
}

interface IModuleState {
    count： ICountState   //count模块中的state的类型
    user： IUserState     // user模块下的state的类型
}   

type IStoreType = IRootState | IModuleState

这样我们在组件中使用useStore就有类型提示了

import { useStore } from '@/store'

const store = useStore()