共计 1281 个字符,预计需要花费 4 分钟才能阅读完成。
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.ts
declare 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…
正文完