为什么nuxt-socket-io的emit无法触发vuex中配置的对应action？

1. 核心概念理解错误：nuxt-socket-io的vuex事件触发逻辑 #

你在nuxt.config.js的io.vuex.actions中配置的事件，是服务端向客户端emit对应事件时，才会自动触发本地的vuex action，不是客户端主动emit事件就会触发本地vuex逻辑。你当前是客户端主动调用this.socket.emit('subscribeToMirror')，这个请求只会发给服务端，只要服务端没有回发subscribeToMirror事件，本地vuex action就永远不会被触发。

2. vuex action写法错误 #

你当前的vuex action没有接收上下文参数，直接调用state会抛出未定义错误，就算事件触发也无法打印日志：

// 错误写法
async subscribeToMirror() {
  console.log('emit worked');
  new TopicMessageQuery().setTopicId(state.topicId) // state未定义
}

// 正确写法，解构上下文拿到state
async subscribeToMirror({ state }) {
  console.log('emit worked');
  // 其余逻辑不变
}

3. 方法内Promise语法错误 #

你在index.vue的subscribeToMirror方法中，Promise的形参命名和实际调用不一致，会直接抛出resolve is not defined错误：

// 错误写法
return new Promise((res) => {
  this.socket.emit('subscribeToMirror', {}, (resp) => {
    console.log(resp)
    resolve() // 形参是res，这里调用resolve会报错
  })
})

// 正确写法
return new Promise((resolve) => {
  this.socket.emit('subscribeToMirror', {}, (resp) => {
    console.log(resp)
    resolve()
  })
})

4. 服务端缺少对应事件监听 #

客户端emit的事件需要服务端有对应的监听逻辑才能响应，如果你测试用的服务端没有写对应subscribeToMirror事件的监听处理代码，自然收不到响应，也不会触发后续逻辑。

对应解决方法 #

• 如果需要客户端触发事件时直接调用本地vuex action，直接在subscribeToMirror方法里加一行this.$store.dispatch('subscribeToMirror')即可，不需要依赖socket的自动触发逻辑。
• 如果你确实需要服务端触发vuex action，先确保服务端收到subscribeToMirror事件后，会主动向客户端emit同名事件，再配合你现有的nuxt配置即可生效。
• 先修复上面提到的语法错误，再排查网络请求确认服务端收到了你的emit请求。

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