Window/onload事件可以用于在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)
})

商店和窗口对象似乎无法相互通信，因为我在商店上一直没有定义，即使我试图将其作为参数传递给这个函数，认为我可以通过这种方式提供访问权限。

与此相关的是：我曾想过，也许我可以尝试用破坏生命周期挂钩oF-Vue来实现这一点。(可能在destroy()之前。)然而，每次启动此组件时，它都会被启动到一个新的浏览器选项卡中。当我关闭该选项卡时，它似乎不会触发组件销毁。看了这些文档后，您似乎必须手动销毁组件，否则它们只会被卸载。如果不能访问$store，我认为我原来的onunload事件也不能与$destroy交互。

Answer 1

在您的代码中，this指的是窗口，或者除vue-component之外的其他内容。然后，您需要创建另一个变量来获得vue-component引用。

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