【偷懒大法】关于 vue3 + vuex + typescript 没有智能提示，改进办法及使用方式

前景提要：

　　当前使用的脚手架为 vite 。

　　其次当前 使用 vue option api 语法

　　当前解决办法仅限使用了 typescript 构建的框架

　　javascript 未经测试，可以放到新项目中，配置 package.json 最后打包到私库，在其他项目中进行引入（理论可以）

---

 

直接不废话：

　　首先需要 vuex 的插件，自己去百度安装，不教。

　　由于 vuex 的官方没有配置 package.json 中关于 types 路径相关内容，导致在常规使用中，所有的函数类型都是 any，所以需要手动增加新的 .d.ts 文件

　　保证  tsconfig.json 中 compilerOptions.include 包含了接下来的所有文件，接下来的几段代码，对应不通的文件。tips：不建议揉一块，以为我没试过

declare module "vuex" {
  export * from "vuex/types/index.d.ts";
  export * from "vuex/types/helpers.d.ts";
  export * from "vuex/types/logger.d.ts";
  export * from "vuex/types/vue.d.ts";
}

declare module "vuex" {
  export interface Commit<T> {
    (type: keyof T, payload?: any, options?: CommitOptions): void;
    <P extends Payload<keyof T>>(payloadWithType: P, options?: CommitOptions): void;
  }

  export interface Dispatch<T> {
    (type: keyof T, payload?: any, options?: DispatchOptions): Promise<T[keyof T]>;
    <P extends Payload<keyof T>>(payloadWithType: P, options?: DispatchOptions): Promise<T[keyof T]>;
  }

  export interface Payload<T> {
    type: T;
  }

  export type UnwrapMethod<T> = T extends (...args: any[]) => () => infer R ? (...args: Parameters<T>) => R : T extends (...args: any[]) => infer R ? R : T;

  export type StoreGetters<T> = {
    [K in keyof T]: UnwrapMethod<T[K]>;
  };

  export interface ActionContext<State, Mutations, Actions, Getters> {
    dispatch: Dispatch<Actions>;
    commit: Commit<Mutations>;
    state: State;
    getters: StoreGetters<Getters>;
    rootState: any;
    rootGetters: any;
  }

  type ModuleDeepUnwrap<G, K> = {
    [Module in keyof G]: {
      [Getter in keyof G[Module][K] as `${string & Module}/${string & Getter}`]: UnwrapMethod<G[Module][K][Getter]>;
    };
  }[keyof G];

  export type ModuleState<Modules> = {
    [M in keyof Modules as `${string & M}/${string & keyof Modules[M]["state"]}`]: Modules[M]["state"];
  };

  type ModuleActions<G> = ModuleDeepUnwrap<G, "actions">;

  type ModuleGetters<G> = ModuleDeepUnwrap<G, "getters">;

  export type ModuleMutations<Mutations> = {
    [M in keyof Mutations as `${string & M}/${string & keyof Mutations[M]["mutations"]}`]: any;
  };

  export declare interface Store<State, Mutations, Actions, Getters, Modules extends ActionContext> {
    readonly state: State & ModuleState<Modules>;
    readonly getters: StoreGetters<Getters> & ModuleGetters<Modules>;

    dispatch: Dispatch<Actions & ModuleActions<Modules>>;
    commit: Commit<Mutations & ModuleMutations<Modules>>;

    replaceState(state: State): void;

    subscribe<P extends MutationPayload>(fn: (mutation: P, state: State) => any, options?: SubscribeOptions): () => void;
    subscribeAction<P extends ActionPayload>(fn: SubscribeActionOptions<P, State>, options?: SubscribeOptions): () => void;
    watch<T>(getter: (state: State, getters: any) => T, cb: (value: T, oldValue: T) => void, options?: WatchOptions): () => void;

    registerModule<T>(path: string, module: Module<T, State>, options?: ModuleOptions): void;
    registerModule<T>(path: string[], module: Module<T, State>, options?: ModuleOptions): void;

    unregisterModule(path: string): void;
    unregisterModule(path: string[]): void;

    hasModule(path: string): boolean;
    hasModule(path: string[]): boolean;

    hotUpdate(options: { actions?: ActionTree<State, State>; mutations?: MutationTree<State>; getters?: GetterTree<State, State>; modules?: ModuleTree<State> }): void;
  }
}

怎么使用：

　　众所周知，在创建 vuex 存储对象是基本结构为 modules(模块)、state(存储)、mutations(命令)、actions(过程)和getters(获取)，在所有的结构中都不允许为空（因为我没判断），其次在 modules 中 必须开启 namespaced (因为就是按着这个开启洗的)

　　众所周由知，在 app.use(store) 后会自动创建到 vue 对象内部，即 this.$store， 但是 由于 缺少 描述提示所以，需要增加新的提示

import { Store, createStore } from "vuex";
import plugin from "./modules/plugin";

const Modules = { plugin };
const State = {};
const Actions = {};
const Mutations = {};
const Getters = {};

/// 定义新的类型
type StoreType = Store<typeof State, typeof Mutations, typeof Actions, typeof Getters, typeof Modules>;
const Store = createStore<any>({
  modules: Modules,
  state: State,
  mutations: Mutations,
  actions: Actions,
  getters: Getters,
}) as StoreType;


export default Store as any;

/// 提供外部的类型
declare module "@vue/runtime-core" {
  export interface ComponentCustomProperties {
    $store: StoreType;
  }
}

export default {
  namespaced: true, // 关键配置
  state: State,
  mutations: Mutations,
  actions: Actions,
  getters: Getters,
};

好了大概就这样。