使用TypeScript创建Vuex插件遭遇类型不兼容问题

嘿，我一眼就瞅出你遇到的问题了：你的ParamsPlugin高阶函数只在内部定义了处理store的逻辑，但没把这个函数返回出来！调用ParamsPlugin()后得到的其实是undefined，可Vuex的plugins数组要求每个元素都必须是符合StorePlugin<RootState>类型的函数，这自然就触发了类型不兼容的错误。

修正后的代码示例 #

1. 基础无参数版本

// Plugin.ts
import { Store, StorePlugin, RootState } from 'vuex';

export const ParamsPlugin = (): StorePlugin<RootState> => {
  // 关键：一定要return这个接收store的函数
  return (store: Store<RootState>) => {
    console.log("ParamsPlugin");
    // 这里可以扩展插件逻辑，比如订阅mutation或action：
    // store.subscribe((mutation) => {
    //   console.log('触发了mutation：', mutation.type);
    // });
  };
};

2. 带自定义参数的版本（满足你的高阶函数需求）

如果需要给插件传递自定义参数，直接在高阶函数里加参数就行，返回类型依然保持StorePlugin<RootState>：

// Plugin.ts
import { Store, StorePlugin, RootState } from 'vuex';

// 可以接收任意类型的自定义参数，比如配置对象
export const ParamsPlugin = (customConfig: { logTag: string }): StorePlugin<RootState> => {
  return (store: Store<RootState>) => {
    console.log(`${customConfig.logTag}: ParamsPlugin 初始化完成`);
    // 用传入的参数做自定义逻辑处理
  };
};

3. Store中的使用方式

// Index.ts
import { StoreOptions, Store } from 'vuex';
import { ParamsPlugin } from './Plugin';
import { RootState } from './types';

const store: StoreOptions<RootState> = {
  state: { /* 你的RootState定义 */ },
  mutations: { /* 你的mutations实现 */ },
  modules: { /* 你的modules配置 */ },
  // 无参数调用
  plugins: [ParamsPlugin()],
  // 带参数调用的例子
  // plugins: [ParamsPlugin({ logTag: '[我的插件]' })],
};

export default new Store(store);

为什么这样能解决问题？ #

Vuex的StorePlugin<S>类型本质是一个签名为(store: Store<S>) => void的函数，你的高阶函数必须返回这个类型的函数，而不是仅仅在内部定义它。原代码缺少return语句，导致函数返回值为void，完全不符合插件数组的类型要求，所以TypeScript会抛出类型不兼容的错误。

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