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

在您的代码中，methods : { checkForm: function (event) { recaptcha_response_value = event.target['g-recaptcha-response'].value ... }指的是窗口，或者您的this以外的东西。然后，您需要创建另一个变量以获取您的vue-component引用。

vue-component

是否可以使用Window / onunload事件在Vue商店中调度动作

1 个答案: