ts增强编译vuex之dispatch

typescript 同时被 2 个专栏收录
28 篇文章 1 订阅
53 篇文章 0 订阅

1.接上一篇文章

https://blog.csdn.net/Ag_wenbi/article/details/118101881?spm=1001.2014.3001.5501

2.hooks文件夹下新增dispatch.ts文件,并写入以下代码,这里不做解析,详细操作上一篇文章,地址在第一步

import module from '@vuex/modules';

type GetModule<Modules> = Modules extends { actions: infer A } ? A : unknown;
type GetModuleItems<Modules> = {
  [K in keyof Modules]: GetModule<Modules[K]>
}
type ModulesType = GetModuleItems<typeof module>;

type GettersName<P, K> = `${P & string}/${K & string}`;
type GetKeys<Modules> = {
  [K in keyof Modules]: GettersName<K, keyof Modules[K]>
}[keyof Modules];

type GettersInfo<T, A, B> = T[A & keyof T][B & keyof T[A & keyof T]];

type GettersFunc<T> = {
  [K in GetKeys<ModulesType>]: K extends `${infer A}/${infer B}` ? GettersInfo<T, A, B> : unknown
}
type GettersFuncObj = GettersFunc<ModulesType>;

export type Dispatch = <K extends keyof GettersFuncObj>(type: K, options?: Parameters<GettersFuncObj[K]>[1]) => ReturnType<GettersFuncObj[K]>;

3.hooks文件夹下,编辑utils.ts文件,如下:

import { State } from '@vuex/modules';
import { Getters } from "./getters";
import { Dispatch } from './dispatch';

export interface StoreUtil {
  state: State;
  getters: Getters;
  dispatch: Dispatch;
}

4.实战使用,在xxx.vue中使用

5.下一篇文章commit地址

https://blog.csdn.net/Ag_wenbi/article/details/118107049 

 

  • 0
    点赞
  • 3
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值