前言

今日我们来看看，store/modules/app下的文件

modules/app/index.ts 文件

js版本的store代码

下图中代码，引入Vue，Vuex，直接对Vue应用Vuex插件
创建一个模块userOptions对象，内部包含actions,mutations,state,getters.

ts版本的store代码

直接将模块对象的各个属性值拆分为了多个文件

引入代码

解释

app/state.ts

创建了一个用去用于判断用户设备的枚举 DeviceType
创建了一个对app模块的state数据所具有的结构进行类型检查的接口AppState
使用接口AppState进行数据类型检查 来创建了一个state数据：
设备信息，侧边栏，语言，屏幕宽度

app/mutation-type.ts

创建了一个枚举，用于保证vuex/mutations的类型安全

app/mutations.ts

从vuex中引入了MutationTree,MutationTree是一个用于约束mutations的数据结构类型正确的接口
从自己创建的state文件中引入了自己创建的用于约束state数据结构类型正确的接口AppState和用于标识和区分用户设备类型的枚举数据
从自己创建的mutation-types.ts文件中引入了自己创建的保存了mutations操作方法名的枚举数据（创建了一个枚举，用于集中保存和管理 app 模块的 mutations 操作方法名称"）
从utils/cookies中引入了一些方法
创建并暴露了一个使用AppState(用于约束state数据结构类型正确的接口)作为默认泛型约束的类型别名，其中使用了自己创建的保存了mutations操作方法名的枚举数据来创建了多个方法，并且给每个方法设置了两个参数state(以S = state作为泛型约束，也就是要求传入的参数state必须符合AppState的一个数据结构类型约束正确【额，那我如何自己设置使得传参时使用新的泛型约束呢】)，

回到正题，
创建了一个以MutationTree(vuex自己的mutations类型)和AppState(自己创建的包含了多个操作方法的类型)的交叉类型作为类型约束的对象mutations，这个对象包含了多个符合交叉后类型约束的标准的方法。很显然这个mutations就是我们要交出去的东西。

action-type.ts

创建了一个叫做AppActionTypes的枚举类型，其定义了五个字符串枚举成员，每个成员的值都与成员名相同的字符串

actions.ts

从vuex中引入了用于进行action创建时进行类型约束的类型ActionTree；引入了提供 action 函数执行时的上下文对象类型ActionContext.

创建了一个类型AugmentedActionContext,这个类型包含了一个commit方法（以从mutations.ts文件中创建并暴露的一个类型Mutations（默认以AppState(接口)为泛型约束）的键名合集作为泛型约束K），
commit参数1:key;commit参数2：获取到Mutations指定方法的所有参数元组的第二个元素的类型（Mutations:一个包含多个操作方法以AppState为默认泛型约束的类型；）

然后再交叉合并了一个使用Omit方法从ActionContext<AppState,RootState>(vuex自己的用于约束ActionContext上下文的数据结构类型正确的类型)中排除了commit属性的后的新类型()

为什么要排除commit呢？

因为前面自己创建了一个commit方法呀，那为什么要自己创建一个commit方法呢，那是因为vuex原版的commit返回值类型并不确定，所以我们要自己创建一个更加安全的commit方法。那这个AugmentedActionContext会在哪里被用到呢，我们且往后看。

创建并暴露了一个接口Actions,Actions包含多个返回值都为void的操作方法，
每个操作方法的键值都是以AppActionTypes(一个枚举，包含了多个字符串枚举成员的枚举类型)，参数1为通过参数解构简洁代码书写直接获取到参数1的commit属性，并且为参数1整体设定了类型约束AugmentedActionContext,
参数二withoutAnimation 类型约束为boolean （布尔），
返回值为空。
总的来说这个Actions接口就是用于约束actions创建时数据结构符合指定要求（方法名要对【要提前在action-types.ts文件中定义，传参要符合】）的接口

使用前面创建的接口Actions 创建了一个actions，
该actions以