是否可以使用Window / onunload事件在Vue Store中調度動作

Question

我正在嘗試添加事件監聽器onunload來調度Vuex存儲操作，讓我知道正在關閉的窗口的ID。 （這是一個應用程序，由於資源消耗，我們需要限制打開的選項卡的數量–它在做一些虛擬化/仿真工作。）

我幾乎可以直接從MDN頁面上成功獲得一個簡單的onunload事件監聽器觸發。

  window.addEventListener("beforeunload", function(event) {
    event.preventDefault();
    // problem line 
    this.$store.dispatch('CURR_TERMINAL_ACTION', this.id)
  })

似乎商店和window對象將無法相互通信，因為我一直在商店中保持未定義狀態，即使當我嘗試將其作為該函數的參數傳遞時，我也可能會以這種方式提供訪問權限。

在相關說明中：我曾想過，也許我可以嘗試使用Vue的銷毀生命周期掛鈎來完成此任務。 （可能是beforeDestroy（）。）但是，每次啟動此組件時，它都會啟動到一個新的瀏覽器選項卡中。 當我關閉該選項卡時，它似乎沒有觸發組件破壞。 查看文檔后，您似乎必須手動銷毀組件，否則它們只會被卸載。 我認為我原來的onunload事件也無法與$ destroy進行交互，如果它無法訪問$ store。

Answer 1

在您的代碼中， this指的是window或vue-component東西。 然后，您需要創建另一個變量以獲取vue-component引用。

let that = this
window.addEventListener("beforeunload", function(event) {
    event.preventDefault();
    // problem line 
    that.$store.dispatch('CURR_TERMINAL_ACTION', that.id)
})