如何使用Vue3+Vuex4+TypeScript配置store模块并解决类型报错

问题1：是否必须自行重写ActionContext才能获得commit的类型提示？ #

不是必须的，当前你使用的自定义ActionAugments是Vuex4动态注册模块场景下的轻量通用方案，如果你不想自行重写ActionContext，也可以选择提前声明全局根Store的完整State类型，再为useStore定义带完整类型的自定义组合式函数。但对于你的动态注册模块的场景，重写ActionContext是成本最低的实现方案，无需提前把所有模块的State都预声明到根类型中。

问题2：registerModule调用报错如何修复？ #

你的报错原因判断正确，核心问题是模块相关的泛型参数和全局根Store的类型不匹配，按以下步骤修改即可：

1. 首先定义全局根State的基础类型，替换原来的空对象类型{}：

// 可单独存放在全局类型文件中，后续新增模块可在此扩展字段
export interface RootState {}

2. 修改issues模块中所有泛型声明的第二个参数，把原来写模块自身State的位置替换为RootState：

• 修改ActionAugments中ActionContext的第二个泛型：

export type ActionAugments = Omit<ActionContext<State, RootState>, "commit"> & {
  commit<K extends keyof Mutations>(
    key: K,
    payload: Parameters<Mutations[K]>[1]
  ): ReturnType<Mutations[K]>;
};

• 修改getters的类型声明：

const getters: GetterTree<State, RootState> & Getters = {
  issues: (state) => state.issues
};

• 修改actions的类型声明：

const actions: ActionTree<State, RootState> & Actions = {
  // 原有业务逻辑保持不变
};

• 修改自动注册函数的入参store的类型：

export default (store: Store<RootState>): void => {
  store.registerModule("issues", {
    namespaced: true,
    state,
    getters,
    actions,
    mutations,
  });
};

修改完成后泛型即可匹配，报错会消失。

内容的提问来源于stack exchange，提问作者Question3r