视窗对象上的Watcher Vue JS

Question

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

在组件中，我试图对

之类的窗口对象使用监视程序

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

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

Answer 1

如果您不想使用Vuex存储（建议的方式-您可以将业务和应用程序状态简单地划分为2个不同的Vuex模块），则建议将此类变量存储在根Vue实例中（您的main.js中的那个）

全局变量（也称为window属性）的问题在于它们没有反应性。您可以尝试使用this.$set(window, 'showFilters', true)，但这很丑陋，可能无法正常工作。

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