窗口对象上的 Watcher Vue JS

【问题标题】：Watcher Vue JS on window object窗口对象上的 Watcher Vue JS
【发布时间】：2019-03-07 21:09:35
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：