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

Question

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

正在使用的模块：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 方法。（例如：创建，安装...）

Answer 2

您需要先关闭该事件。

this.$events.$off("playAll");
this.$events.$on('playAll', data => {
    this.initPlaylist(data.songs) //runs twice
})