如何在Pinia的$onAction回调中用Options API调用$emit？是否需用组合式API？

1. 解决setup里this undefined的问题 #

setup函数本身不存在组件实例的this，不管用箭头函数还是普通函数，这里的this都是undefined，这是组合式API的设计逻辑。要调用$emit，直接从setup的第二个参数context中解构出emit方法即可：

export default {
  setup(props, { emit }) {
    const someStore = useSomeStore();

    someStore.$onAction(() => {
        emit('your-event-name', eventPayload); // 直接调用emit，无需this
    });

    return { someStore };
  },
}

2. 不一定必须用组合式API，Options API也能实现 #

你完全可以在Options API的钩子中实现需求，比如created或mounted钩子，这些钩子中的this指向组件实例，可以直接调用this.$emit：

export default {
  created() {
    const someStore = useSomeStore();
    someStore.$onAction(() => {
      this.$emit('your-event-name', eventPayload);
    });
  }
}

3. 将$onAction移至监听器的合理性分析 #

这种做法是否合理取决于你的业务场景，但要注意一个核心问题：重复注册回调。如果监听的状态多次变化，每次触发都会注册一个新的$onAction回调，导致后续store动作触发时，emit会被执行多次。

如果确实需要动态注册，一定要记得注销之前的回调（$onAction会返回一个注销函数），避免冗余执行：

export default {
  setup(props, { emit, onUnmounted }) {
    const someStore = useSomeStore();
    let unsubscribeAction = null;

    // 假设监听某个状态变化来动态注册
    watch(() => someStore.someState, () => {
      // 先注销之前的回调
      if (unsubscribeAction) unsubscribeAction();
      // 重新注册新的回调
      unsubscribeAction = someStore.$onAction(() => {
        emit('your-event-name', eventPayload);
      });
    });

    // 组件卸载时清理回调
    onUnmounted(() => {
      if (unsubscribeAction) unsubscribeAction();
    });
  }
}

如果没有动态注册的必要，建议直接在setup、created这类初始化钩子中注册一次$onAction，更简洁也更安全。

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