Vue.jsでリロード前に処理を実行する

VueJS JavaScript

意図

vm.$destroy()が呼ばれた時に、beforeDestroydestroyed の順番で実行されるが、URLの直変更やリロードでは、vm.$destroy()が実行されないようなので、beforeunload を使用して、処理を実行する。

例としては、ユーザーがサービス使用中に用意している手順で終了しないケースです。

  • ブラウザそのものを終了する。
  • ブラウザのタブを消す。
  • ページをリロードする。

コード

export default {
  // windowを使うのでmountedでイベント登録
  mounted () {
    window.addEventListener('beforeunload', () => {
      this.test()
    })
  },

  // 一応破棄
  destroyed () {
    window.removeEventListener('beforeunload', () => {
      this.test()
    })
  },

  methods: {
    test () {
      console.log('test')
    }
  }
}

結果

test()にDBにデータを保存して確認してみた結果です。

  • ブラウザそのものを終了する。 => 実行できている。
  • ブラウザのタブを消す。 => 実行できている。
  • ページをリロードする。 => 実行できている。

素晴らしい!

ですが、おそらくブラウザ自身が終了することを知っていないとだめなので、マシン自体の強制終了では動かないような気がします。

beforeunload イベントは、ウィンドウ、文書、およびそのリソースがアンロードされる直前に発生します。

また、ここでネットワークに関する処理を使う場合は、オフラインかどうか判定してlocalStoragesessionStorageに保存するなども考えられます。

資料