javascript - 窗口对象上的 Watcher Vue JS

Question

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

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

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

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

Answer 1

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

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

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