Vue３ ページ離脱時のアラートの実行結果を取得することはできますか？

Question

訪問いただきありがとうございます。
ページ離脱時・リロード時に出るアラート周りの実装をしています。
アラートは出るようになったのですが、どうしてもアラート後の処理を制御することができません。
vue, jsに詳しい方、アドバイスいただけると嬉しいです。

前提・実現したいこと

（vue3で）
ページ離脱時（リロード時）のアラートが、許可されたかどうかを検知して、関数を実行したい
※流れ↓

• リロード
• 標準のアラートが表示される（「サイトを離れますか？」）
• 「このページを離れる」押下後、stateをクリアする関数を実行
• 「キャンセル」した場合は、クリア関数を実行しない

困っていること

アラート内の「このページを離れる」「キャンセル」ボタン
どちらを押下したか検知したいです。

その結果によって、
上記（実現したいこと）の通りに処理を切り替えたいです。

やったこと

下記コード①②で、stateをクリアする関数を実行しましたが、
期待どおりの挙動をしません。
// コメントに書いています

コード

import { defineComponent, ref, onUnmounted, watch, reactive, computed, onBeforeMount, onBeforeUnmount } from 'vue'
import { useStore } from "vuex"
import { onBeforeRouteLeave } from 'vue-router'

export default defineComponent({
  name: 'SampleLayout',

  setup() {
    const store = useStore()


    // stateの一部をクリアする
    const clear = () => {
      store.commit('sample/clear')
    }

    const onBeforeunloadHandler = (evt) =>  {
      evt.returnValue = '編集中の内容は失われます。よろしいですか？'

      // ここでやると、リロードをキャンセルしても、実行されてしまう　ー①
      // clear()
    }

    // created
    window.addEventListener('beforeunload', onBeforeunloadHandler, false)

    onBeforeUnmount(() => {
      LOG.dev("before destoroy")
      window.removeEventListener('beforeunload', onBeforeunloadHandler, false)

      // 実行されない
      // clear()　ー②
    })
  }
})

環境

• vue3
• http://localhost:8080/(ホットリロード有効)
• windows
• vsCode

よろしくお願いいたします。

Answer 1

離れることを許可したあとの制御は完全にブラウザ側のものとなっていますので、原理的に不可能ですし、（特にこの場合は）無意味です。

ブラウザJavaScriptで記録されているstateは、ブラウザによるページ遷移で消し飛びますので、わざわざリセットする必要性もありません。

Comments

[yooonb]

回答ありがとうございます。

> 離れることを許可したあとの制御は完全にブラウザ側のものとなっていますので、原理的に不可能
そうなんですね。勉強不足でした。

> ブラウザJavaScriptで記録されているstateは、ブラウザによるページ遷移で消し飛びますので、わざわざリセットする必要性もありません。
今回の場合、stateはブラウザを閉じても保持する設定にしているので、
明示的にクリアしないと消えないようになっています。
保持するstateと、クリアしたいstateがあります。

そのため、実行結果を検知したかったのですが、
ロジックを見直さないといけないかもしれませんね。。
再度、見直してみます。

[yooonb]

1．onUnmounted時にクリアできるか
2. 逆にマウント時にクリアできるか
試してみます。

[yooonb]

上記の１番の方法で、やりたいことを実現できました！
複雑に考えていたようでした。
的確な回答を頂き、ありがとうございました。

ベストアンサーにさせていただきます。