Currently, I am working on integrating an event listener for the `unload` event to trigger a Vuex store action that will help identify the ID of the closing window. This is crucial in our application where we need to manage the number of open tabs due to resource constraints caused by virtualization and emulation processes.
I managed to successfully implement a basic `unload` event listener by referencing the MDN documentation.
window.addEventListener("beforeunload", function(event) {
event.preventDefault();
// issue lies here
this.$store.dispatch('CURR_TERMINAL_ACTION', this.id)
})
There seems to be a disconnect between the store and the window object, as I continuously received an `undefined` value for the store, even when attempting to pass it as an argument to the function in hopes of establishing access.
Regarding a potential solution, I considered utilizing a Vue destruction lifecycle hook like `beforeDestroy()`. However, I encountered an issue where each time the component launches, it opens in a new browser tab. Subsequently, closing the tab fails to trigger the component destruction process. According to the documentation, components need to be manually destroyed as they only get unmounted by default. If the original `unload` event cannot access `$store`, it might also face limitations in interacting with `$destroy`.