--- highlight: a11y-dark theme: fancy --- 持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，[点击查看活动详情](https://juejin.cn/post/7099702781094674468) ## 简介虽然`TypeScript`知识点学了很多，但是在实际项目中很多小伙伴还并不知道怎么用，今天笔者结合`Vuex4`来使用`TypeScript`实战一下。本文分`vuex4`类型 `Api`分析和`vuex4`实战两部分讲述。首先我们来分析下 `vuex4` 的类型 `Api` ## createStore 我们可以先看看`createStore`方法，发现它需要传递一个泛型，并且这个泛型会应用到`state`上。 ```ts export function createStore(options: StoreOptions): Store; export interface StoreOptions { state?: S | (() => S); getters?: GetterTree; actions?: ActionTree; mutations?: MutationTree; modules?: ModuleTree; plugins?: Plugin[]; strict?: boolean; devtools?: boolean; } ``` ## GetterTree 我们可以看到`getters`的类型`GetterTree`接收了两个泛型。 ```ts export interface GetterTree { [key: string]: Getter; } ``` 这两个泛型分别应用在本模块`state`上和根`state`上。 ```ts export type Getter = (state: S, getters: any, rootState: R, rootGetters: any) => any; ``` ## MutationTree 我们可以看到`mutations`的类型`MutationTree`只接收了一个泛型。 ```ts export interface MutationTree { [key: string]: Mutation; } ``` 并且这个泛型只应用到本模块`state`上。 ```ts export type Mutation = (state: S, payload?: any) => any; ``` ## ActionTree 我们可以看到`actions`的类型`ActionTree`接收了两个泛型。 ```ts export interface ActionTree { [key: string]: Action; } ``` 并且也将这两个泛型分别应用在本模块`state`上和根`state`上。我们还可以看到，由于`action`支持对象和方法形式的写法，所以`Action`的类型是`ActionHandler`和`ActionObject`的联合类型。 ```ts export type Action = ActionHandler | ActionObject; export type ActionHandler = (this: Store, injectee: ActionContext, payload?: any) => any; export interface ActionContext { dispatch: Dispatch; commit: Commit; state: S; getters: any; rootState: R; rootGetters: any; } ``` ## ModuleTree 我们可以看到`modules`的类型`ModuleTree`只接收了一个泛型。并且将这个泛型传递到了`Module`里面。 ```ts export interface ModuleTree { [key: string]: Module; } ``` 我们可以发现，`module`的类型和`createStore`的`StoreOptions`是非常像的。因为模块本身也有自己的`state、getters、actions、mutations、modules` ```ts export interface Module { namespaced?: boolean; state?: S | (() => S); getters?: GetterTree; actions?: ActionTree; mutations?: MutationTree; modules?: ModuleTree; } ``` 了解了`vuex4`类型 `Api`接下来我们就进入到实战环节了。 ## 实战首先我们需要使用`vuecli`创建一个`TypeScript`的项目。 ### 整体目录结构笔者`store`整体目录结构如下 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e437b415168453f89395d42331591bc~tplv-k3u1fbpfcp-watermark.image?) 1. `index.ts` 和以前的还是一样，用来创建根`store`并导出根`store`。 2. `interfaces.ts` 用来存放`store`的类型。 3. `modules.ts` 和以前的还是一样，用来存放模块。 ### 首先定义根`state`的类型 ```ts // interfaces.ts type Info = { address: string }; export interface IRootState { name: string; age: number; info: Info; } ``` ### 在创建`store`的时候将根`state`的类型传递进去。 ```ts // index.ts import { createStore, Store } from "vuex"; import { InjectionKey } from "vue"; import { IRootState } from "./interfaces"; export default createStore({ state: { name: "root", age: 0, info: { address: "" }, }, getters: { getRootName(state) { return state.name; }, getRootInfo(state) { return state.info; }, }, mutations: {}, actions: {}, }); ``` ### 并且需要导出`key` ```ts // index.ts export const key: InjectionKey> = Symbol(); ``` ### 在`Vue`实例使用`store`的时候将`key`一并传入。 ```ts // main.ts import store, { key } from "@/store"; createApp(App).use(store, key).mount("#app"); ``` ### 在vue组件使用这样我们在`vue`组件就能享受到`TypeScript`的优势啦。注意这里的`useStore()`，也需要我们把`key`传递进去。 ```js import { useStore } from "vuex"; import { key } from "@/store"; setup() { const store = useStore(key); return { rootName: store.state.name, }; }, ``` 可以看到，我们使用`state`的时候就会被自动提示啦。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7eda5ab2df554dda835fc92914144c11~tplv-k3u1fbpfcp-watermark.image?) 并且当你使用不存在的属性时会在我们编写代码的时候就会直接报错提示。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0222dd9243be419387a9d299bef1c0ff~tplv-k3u1fbpfcp-watermark.image?) 相较`js`，大大提高了开发效率不说，还减少了`bug`。 ### 自定义useStore()方法如果觉得每次`useStore()`，还需要我们把`key`传递进去麻烦的话，我们可以创建自己的`useStore()`方法。 ```ts // index.ts import { useStore as baseUseStore } from "vuex"; export function useStore() { return baseUseStore(key); } ``` 这样我们在`vue`组件使用`store`的时候引入自己的`useStore`方法就可以啦。 ```js import { useStore } from "@/store"; setup() { const store = useStore(); return { rootName: store.state.name, }; }, ``` 我们知道，在实际项目中只创建一个根`store`是远远不够的。一般我们都会使用`modules`。下面笔者介绍下怎么使用`modules`。 ### modules的使用模块的类型是`Module`，并且需要传递本模块`state`类型和根`state`类型。本模块`state`类型需要传递进去我们可以理解，但是为什么要传递根`state`类型呢？因为我们的`getters`和`actions`参数里面是有`rootState`的，所以需要引入根`state`类型。 ```ts // modeuls/test1.ts import { Module } from "vuex"; import { IRootState, ITest1State } from "../interfaces"; const Test1: Module = { state: { name: "test1", count: 0, }, getters: { getTest1Name(state) { return state.name; }, getAllName(state, rootState) { return state.name + rootState.age; }, }, }; export default Test1; ``` 创建好模块后我们需要在根`store`里面引入进去，引入方式和以前还是一样。并且我们需要把模块的`state`类型一并传递到`InjectionKey`中和根`state`类型形成交叉类型，并重新生成`key`。 ```ts // index.ts import { createStore, Store, useStore as baseUseStore } from "vuex"; import { InjectionKey } from "vue"; import { IRootState, ITest1State } from "./interfaces"; import test1 from "./modeuls/test1"; export default createStore({ // ... modules: { test1: test1, // ...多个模块，类似 }, }); // 定义模块类型 type Modules = { test1: ITest1State; // ...多个模块，类似 }; // 使用交叉类型形成新的key export const key: InjectionKey> = Symbol(); ``` 我们来看看在`vue`组件中的使用效果。我们可以发现，当我们使用`state`的时候，`test1`模块也会被提示出来 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/63fbae49efba4cf2bf9aef8f2502a4e0~tplv-k3u1fbpfcp-watermark.image?) 并且它里面的属性也会被直接提示出来 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/28cf68b9091347a986fdcfe872eec7ac~tplv-k3u1fbpfcp-watermark.image?) 好了，实战环节就讲述的差不多了，小伙伴们时候都懂了呢？ ## 总结虽然`vuex4`对`TypeScript`有了很好的支持，但是笔者觉得还是不够的。比如使用麻烦，每次需要定义一个`key`，还需要把可以传递到`vue`的`use`方法里面，并且在使用`useStore`的时候也还需要将`key`传递进去，无疑增加了开发成本。其次，这样的配置并不会对`getters、mutations、actions`生效，只会对`state`有提示。和`pinia`比起来，整体使用体验还是会差很多。如果想学习pinia，并想了解pinia和vuex区别的话可以看看[TypeScript实战之Pinia(对比Vuex)](https://juejin.cn/post/7113109565582868511)一文。 ## 扩展对于`vuex`的模块和命名空间的使用，可能有些小伙伴还会有疑问，这里笔者再总结一下。 ### 模块当`vuex`使用模块后，`state`会按模块读取，而`getter、mutation、action`不受影响。 `state`和`rootState`不一样，`state`只是本模块的状态，`rootState`是所有模块状态。 `getters`和`rootGetters`是一样的，都是全局的。只开启模块的话，在当前模块是可以提交其他模块的`mutation`和`action`。 ```js // user模块 { state: { name: 'randy' }, getters: { getName(state, getters, rootState, rootGetters) { return state.name } }, mutations: { setName(state, payload) { state.name = payload } }, actions: { asyncSetName({commit, dispatch, state, rootState, getters, rootGetters}, payload) { commit("setName", payload) } } } ``` 比如上面的例子，除了`state`获取方式会变化，其他的都不变 ```js store.state.user.name store.getters.getName commit("setName", 'demi') dispatch("asyncSetName") ``` ### 命名空间如果想要`getters、mutations、actions`也区分模块，可以开启命名空间。 ```js { namespaced: true } ``` 当开启命名空间后，`getters、mutations、actions`都需要通过`模块名/key`的方式获取。比如上面的例子，使用的话需要添加模块名。 ```js store.state.user.name store.getters['user/getName'] commit("user/setName", 'demi') dispatch("user/asyncSetName") ``` 并且 `getters`和`rootGetters`不再一样的。`getters`只包含本模块的`getters`，`rootGetters`是所有模块的getters。本模块不能定义全局`action`，除非添加`root: true`，并将这个 `action` 的定义放在函数 `handler` 中。 ```js globalAction: { root: true, handler(context, payload) { context.commit("mutation", payload); }, }, ``` 本模块不能提交其他模块的`mutation`和`action`。如果一定要提交，需要传递第三个参数`root: true}` ```js commit("otherModuleMutation", payload, { root: true }); dispatch("otherModuleAction", payload, { root: true }); ``` ## 系列文章 [TypeScript学习之环境搭建](https://juejin.cn/post/7106500517634768927) [TypeScript学习之数据类型](https://juejin.cn/post/7107237567308759054) [TypeScript学习之函数](https://juejin.cn/post/7107526994585190407) [TypeScript学习之接口](https://juejin.cn/post/7107931420852486175) [TypeScript学习之类](https://juejin.cn/post/7108252659278151693) [TypeScript学习之类型推断、类型断言、双重断言、非空断言、确定赋值断言、类型守卫、类型别名](https://juejin.cn/post/7108724041103441957) [TypeScript学习之泛型](https://juejin.cn/post/7109280052566556680) [TypeScript学习之装饰器](https://juejin.cn/post/7109757878956720159) [TypeScript学习之模块与命名空间](https://juejin.cn/post/7110026625177092109) [TypeScript学习之申明文件](https://juejin.cn/post/7110421088575684639) [TypeScript学习之常用内置工具类型](https://juejin.cn/post/7111214349552713758) ## 后记感谢小伙伴们的耐心观看，本文为笔者个人学习笔记，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力！