@whitetrefoil/vuex-type-helpers 是一个用于 Vuex 的 TypeScript 工具包，它可以使 Vuex 的 type 定义变得更易读、更易用，同时提供了一些有用的辅助函数，使得代码的可维护性得到了提高。
安装
你可以通过 npm 或 yarn 安装该包：
npm install @whitetrefoil/vuex-type-helpers # 或 yarn add @whitetrefoil/vuex-type-helpers
使用
安装完成后，你可以像这样使用该库：
-- -------------------- ---- ------- ------ - ------------- - ---- ---------------------------------- --------- ----- - ------ ------- - ----- ------- - --- -------------------------------- ------ - --- ------ ----- ------------- - ------- ----------------- ----- -- ----------- - -- ---------------------- ----- -- -------------- ---------------- ------- ------- ------- -- ------------ -- -------- ---------
该模块建议与 Vuex 3.x 配合使用（在 Vuex 4.x 中可能会存在类型兼容性问题）。
这段代码声明了一个状态对象包含一个名为 count 的数字属性，接着通过 ModuleBuilder 类初始化构建模块，并通过链式调用 getter 和 mutation 方法添加 Vuex 的 getter 和 mutation 函数。
最后通过 build 方法生成 Vuex module。
辅助函数
@whitetrefoil/vuex-type-helpers 中提供了许多辅助函数，接下来我们来分别介绍这些函数。
assert
该函数用于帮助我们断言类型，主要有以下两种使用方式：
-- -------------------- ---- ------- ------ - ------- ------------ - ---- ---------------------------------- --------- ------- - -- ------- -- ------- - --- -- ------- --- -- -------- - - -------------------------- -- ------------ - - -------------------------- -- -------------
可以看到，assert 函数的泛型参数用于断言该变量的值，你可以通过编辑器快速得到该变量所具有的类型，从而避免由于 typescript 类型漏洞带来的问题。
identity
该函数是一个简单的 helper 函数，用于返回参数本身，通常用于 mapGetters 的参数中。示例：
import { identity } from '@whitetrefoil/vuex-type-helpers';
const myGetter = {
...mapGetters('myModule', {
myGetter1: identity<MyModuleState.myGetterPayload, number>(),
}),
};getPayload
该函数用于从 Vuex 的 action 载体中获取参数。示例：
-- -------------------- ---- -------
----- ------- - --- -------------------------------- ------ - ---
------ ----- ------------- - -------
------------------------- ----- --------- ------- ------- -- -
----- ------------
--------------------- --------
--
---------
-- -----
---------------------------------------- ------------------------该函数的泛型参数用于断言参数类型。
MultiGetters
该集合类提供了一些有用的辅助函数作为 getters 中的函数，分别为：
first: 获取集合中的第一个对象。pick: 返回集合对象中指定的属性的值。示例：this.pick('a', 'c')返回一个新对象，只包含a和c属性。exclude: 返回从集合对象中排除指定键的新对象。示例：this.exclude('a', 'c')返回一个新对象，不包含a和c属性。union: 返回两个对象的并集。
示例：
-- -------------------- ---- ------- ------ - ------------ - ---- ---------------------------------- --------- ---- - --- ------- ----- ------- - --------- ----- - ------ ------- - ----- ------- - --- ----------------------- ----------------- ----------- ------- -- ---- ------- -- ------------------ -- ---- --- ---- ------ ----------------------------------------- ----- -- ------------- --- ------ ----- ---------- - ----------------
UnionBuilder
UnionBuilder 是一个用于生成联合类型的辅助类：
-- -------------------- ---- ------- ------ - ------------ - ---- ---------------------------------- ----- - - --- -------------- --------- ---------- --- -- ------ ----- - - ------ -- ------- - - ---- -- ------- - - ----- -- -----
这段代码声明了一个联合类型 t 注释中的 |，实际上在使用中是可以通过自动补全在 x 变量上选择 number 或 string 类型的。
总结
@whitetrefoil/vuex-type-helpers 可以使用其提供的辅助类和辅助函数来生成更具可维护性和内在的 Vuex Store，在维护复杂的项目生命周期中可以为开发者节省时间和精神。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006735a890c4f7277583e8e