vue.js - Nuxt Js 事件触发两次

Question

我正在为正在构建的应用程序使用 Nuxt js SSR，我安装了 Vue Event 插件，但是当我发出一个事件时，它会在监听器上运行两次。创建的钩子(Hook)也运行两次。

模块正在使用:Axios、Auth、Toast

子组件

methods: {
  initPlaylist(songs) {
    console.log(songs)
  }
},
mounted () {
  this.$events.$on('playAll', data => {
    this.initPlaylist(data.songs) //runs twice
  })
}

父组件

method () {
    playAll (songs) {
      this.$events.$emit('playAll', songs)
  }
 }

伙计们，我该如何解决这个问题？我需要你的帮助。

Answer 1

也许您只需要在客户端调用该父级的方法。

您可以编写这样的代码来防止在服务器端发出:

methods: {
  playAll(songs) {
    if (process.server) return

    this.$events.$emit('playAll', songs)
  }
}

或者不要在服务器端调用 playAll 方法。 (例如:创建、安装...)