时间戳

首页 > 解决方案 > 窗口对象上的 Watcher Vue JS

javascript - 窗口对象上的 Watcher Vue JS

问题描述

我想在全局窗口对象中存储组件之间的一些变量，所以我这样做了 window.showFilters = !window.showFilters

在组件中，我试图在窗口对象上使用观察器，例如

watch: {
    "window.showFilters": {
      handler: () => {
        console.log(window.showFilters);
      },
      deep: true
    }
  },

但是，这不起作用，所以我必须使用 Vuex，我只想将其用于业务数据，而不仅仅是代码变量。是否有正确的方法来观察窗口对象中的变量？

标签： javascriptvuejs2

解决方案

如果您不想使用 Vuex 存储（这是推荐的方式 - 您可以简单地将业务和应用程序状态分隔在 2 个不同的 Vuex 模块中），那么建议您将这些变量存储在根 Vue 实例中（在你的main.js）

全局变量（又名window属性）的问题在于它们不是反应式的。您可以尝试使用this.$set(window, 'showFilters', true)，但这很丑陋并且可能不起作用。

但是即使将变量放在根 Vue 实例中，您仍然需要通知组件有关更改的值 - 您可以通过仅发出事件来做到这一点（观察者只能观察同一组件内的变化 - 而不是组件之间的变化）

推荐阅读