窗口对象上的观察者VUE JS

Question

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

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

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

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

Answer 1

如果您不想使用vuex商店（这是推荐的方式 - 您可以简单地将业务和应用程序状态分开以2个不同的vuex模块），则建议您存储根VUE实例中的此类变量（您的main.js中的一个）

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

但是，即使将变量放在根VUE实例中，您仍然需要告知组件有关更改的值的信息 - 您只能通过发射事件来执行此操作（观察者只能关注同一组件内部的更改 - 而不是在组件之间 - ）

Answer 2

我这样解决：

mounted(){
  setInterval(()=>app.myownwatcher(), 100)
},
methods: {
  myownwatcher(){ 
    // do something with window.showFilters
  
  }
}

它不是最好的方法，而是工作：/当我的应用程序运行时，我创建一个间隔，以更新我的模型