Vueのグローバルイベントを使うときの注意

420
NO IMAGE

以前書いた「Vueでグローバルイベントを扱う」の続き。

通常のSPAであれば、$rootへのイベントハンドラーの登録処理をもっとも基底のコンポーネント、即ちAtomic ComponentsでいうEnvironments単位で行えば登録したままでも不都合はない。

しかしEnvironmentsのコンポーネントが複数存在し、それらのコンポーネント間を行き来するような場合（=恐らく厳密にはSPAではない）、イベントハンドラーの多重登録が行われて予期せぬ動作になってしまう。そのため、以下のようにbeforeDestroyでイベントハンドラーの解除を行う必要がある。（※Vueのライフサイクルのdestroyはあくまでもそのコンポーネントの破棄なので、あるコンポーネントが$rootに登録したイベントハンドラーの破棄まで請け負うわけではない。）

class Main extends Vue {
  mounted () {
    this.$root.$on('GlobalEventA', this.onGlobalEventA)
    this.$root.$on('GlobalEventB', this.onGlobalEventB)
  }

  beforeDestroy () {
    this.$root.$off('GlobalEventA')
    this.$root.$off('GlobalEventB')
  }
}

もっともイベントハンドラーを$onで明示的に登録したら、不要になったタイミングで破棄するというのは一般的なプログラミングの作法ではある。