vuex 4.x TS加强

更好的反对智能提醒及TS查看，在不影响已有TS反对的性能状况下，加强 state, getters 有限层级属性提醒，并反对只读校验；加强commit、dispache办法感知所有操作类型名称并对载荷参数查看，类型名称反对namespaced配置进行拼接。

装置

$ yarn add vuex-ts-enhanced

应用

import { createStore} from 'vuex'import { ExCreateStore } from 'vuex-ts-enhanced'class State {  count: number = 1}export const store = (createStore as ExCreateStore)({  state: new State()  ...})

或者应用笼罩申明形式, 在你的我的项目文件夹中增加一个d.ts文件:

// vuex.d.tsdeclare module 'vuex' {  export { createStore } from 'vuex-ts-enhanced'}

这样就能够不改变任何原有的Vuex应用办法。

不反对的操作：

不反对对象形式分法或提交，因为没有限度载荷必须为对象类型；
不反对在带命名空间的模块注册全局 action，不举荐这种用法；
不反对动静注册的模块，须要应用 (store.dispatch as any)('doSomething') 的形式来跳过查看；

不兼容的应用办法 createStore<State>({...})

无需手动指定<State>，默认将会主动从 state 选项中推断；当须要自定义类型时，请应用 class 进行定义并设置初始值，而后在state配置项中创立一个实例；

class State {  name = ''  count = 1  list?:string[] = []}const store = createStore({  state: new State(),  ...}

全局类型补充
将 store 装置到 Vue 利用时，会挂载this.$store属性，同时将 store 注入为利用级依赖，在未指定 InjectionKey 时将应用 "store" 作为默认 key, 因而咱们能够在组合式 API 中应用inject('store')来拿到 store 实例，然而却无奈感知返回的数据类型，为此咱们能够应用上面的形式给 store 进行类型补充：

import { store } from '.. /src/store'interface InjectionMap {  'store': typeof store}declare module '@vue/runtime-core' {  interface ComponentCustomProperties {    $store: InjectionMap['store']  }  export function inject<S extends keyof InjectionMap>(key:S):InjectionMap[S]}

github: https://github.com/nicefan/vu...
Vuex PR 反对: https://github.com/vuejs/vuex...