Watcher Vue JS на оконном объекте

Question

Я хочу сохранить некоторые переменные между компонентами в объекте глобального окна, поэтому я делаю window.showFilters = !window.showFilters

В компонентах я пытаюсь использовать наблюдатель для объекта окна, например

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

Однако это не работает, поэтому я должен использовать Vuex, который я хотел бы использовать только для бизнес-данных, а не только для переменных кода.Есть ли правильный способ отслеживать переменные в объекте окна?

Answer 1

Если вы не хотите использовать хранилище Vuex (что является рекомендуемым способом - и вы можете просто разделить бизнес и состояние приложения в 2 разных модулях Vuex), то рекомендуется хранить такие переменные в корневом экземпляре Vue ( один в вашем main.js)

Проблема с глобальными переменными (свойства a.k.a window) заключается в том, что они не являются реактивными. Вы можете попробовать использовать this.$set(window, 'showFilters', true), но это ужасно и может не сработать.

Но даже помещая ваши переменные в корневой экземпляр Vue, вам все равно нужно информировать ваши компоненты об измененном значении - и вы можете сделать это, отправляя только события (наблюдатель может только наблюдать за изменениями внутри одного компонента, а не между компонентами). )