Vuex中如何通过dispatch传递事件对象？箭头函数绑定事件无法移除的问题

一、如何通过Vuex的dispatch传递事件对象 #

其实你的代码里已经正确实现了事件对象的传递啦！具体步骤很简单：

1. 在触发dispatch的时候，直接把事件对象e作为第二个参数传入，比如在open方法里：

   document.addEventListener('click', (e) => this.dispatch('clickListener', e))
   

2. 在对应的action处理函数（clickListener）中，第一个参数是Vuex的上下文对象ctx，第二个参数就是你传递过来的事件对象：

   clickListener(ctx, e) {
     console.log(e); // 这里就能拿到完整的事件对象啦
   }
   

如果需要传递多个参数，可以把它们包裹成一个对象，比如：

this.dispatch('someAction', { event: e, data: 'other info' })

然后在action里接收：

someAction(ctx, payload) {
  console.log(payload.event, payload.data);
}

二、箭头函数无法用removeEventListener移除的原因及解决办法 #

问题根源

你遇到的问题是因为箭头函数每次创建都是一个全新的函数实例。你在open里添加的(e) => this.dispatch('clickListener', e)和close里移除的同一个写法的箭头函数，本质上是两个不同的函数引用。removeEventListener只能移除和添加时完全相同的函数引用，所以自然失效了。

解决方案：使用共享的函数引用

我们只需要把回调函数抽出来，保存为一个可以复用的引用，这样添加和移除时用同一个函数即可。修改你的代码如下：

// 定义一个变量存储回调函数的引用，确保add和remove用同一个
let clickCallback = null;

export const actions = {
  open({ dispatch }) {
    document.querySelector('nav').classList.add('open')
    // 保存回调函数引用，用普通函数（避免this指向问题）
    clickCallback = function(e) {
      dispatch('clickListener', e)
    }
    document.addEventListener('click', clickCallback)
  },
  close() {
    document.querySelector('nav').classList.remove('open')
    // 用同一个引用移除监听，同时清空避免内存泄漏
    if (clickCallback) {
      document.removeEventListener('click', clickCallback)
      clickCallback = null;
    }
  },
  toggle({ dispatch }) {
    const nav = document.querySelector('nav')
    if (nav.classList.contains('open')) {
      dispatch('close')
    } else {
      dispatch('open')
    }
  },
  clickListener(ctx, e) {
    console.log(e);
  },
}

额外优化建议

• 尽量避免在Vuex的actions里直接操作DOM，建议把nav的open状态存在Vuex的state中，通过响应式数据来控制DOM的类名，这样更符合Vue的响应式思想。
• 移除监听时一定要检查回调是否存在，避免出现removeEventListener传入null的报错。

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