Nuxt Js 事件触发两次

Question

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

正在使用的模块： 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
})

Nuxt Js 事件触发两次

Nuxt Js Event Fires Twice

vue.js

vuejs2

nuxt.js

vue-events