如何通过Pinia插件修改或添加Store中的Action？

为什么直接修改options.actions无效 #

你之前的写法没用，是因为Pinia在初始化Store实例时，会基于传入的options生成Store上的方法，后续修改options不会同步到已经创建好的Store实例上。

可行解决方案 #

方案1：直接修改Store实例的Action（推荐） #

在Pinia插件里，通过context.store拿到已初始化的Store实例，直接重写或新增Action：

pinia.use(({ store }) => {
  // 可选：保存原有Action逻辑，需要时可以调用
  const originalAction = store.actionToModify;
  
  // 重写目标Action
  store.actionToModify = (param) => {
    console.log('修改后的Action执行:', param);
    // 如果要保留原逻辑，取消下面注释
    // originalAction.call(store, param);
  };

  // 新增一个Action示例
  store.newAction = () => {
    console.log('这是插件新增的Action');
  };
});

方案2：在Store初始化前修改Options（针对未创建的Store） #

如果要让所有该Store的实例都用修改后的Action，可在插件中判断Store的ID，提前修改其options，但要确保插件在Store定义前注册：

pinia.use(({ options, store }) => {
  // 只处理ID为"store"的目标Store
  if (store.$id === 'store') {
    const originalAction = options.actions.actionToModify;
    options.actions.actionToModify = function(param) {
      console.log('修改后的Action:', param);
      // 调用原Action逻辑
      originalAction.call(this, param);
    };
  }
});

验证效果 #

在组件中调用Action即可看到修改后的结果：

import { useStore } from './stores/yourStore';

const store = useStore();
store.actionToModify('测试参数'); // 会输出修改后的日志

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