Как объявить и использовать глобальную переменную с Vue?

Question

[Ankozar]

Начинаю учить Vue. Работаю через CLI

Хочу менять состояние элементов DOM при изменении ориентации экрана.

Как отследить изменение, знаю.

Но возникает вопрос. Это изменение должны отслеживать чуть ли не все элементы на странице. Пихать эту функцию в каждый - неправильно, как я понимаю.

Почти для всех элементов я пишу компоненты.

Как и где определить глобальный параметр (переменную), чтобы забайндить класс нужных компонентов?

Вроде этого:

<template>
    <img class='menu-butt' 
    :class='{ "menu-butt__header": mobile}'
    src='/img/кнопка.png'>
</template>

//Отслеживаю так:
if(window.matchMedia('(orientation: portrait)').matches){
        this.mobile = true
      }

Comments

[tantumus21]

vuex

[Ankozar]

tantumus21,
Только он?
А есть вариант проще? Я просто хочу сначала основы Vue понять, а потом уже всякие дополнения разбирать.

[Barmunk]

Ankozar, если приложение станет чуть сложнее списка, а оно таким становится буквально через день разработки, лучше всегда ставить vuex, при этом подход проектирования приложения слегка меняется и придётся почти все переписать. Могу посоветовать после освоения методов из vuex, поставить вот этот компонент, будет значительно приятнее https://github.com/davestewart/vuex-pathify

[Вадим]

Ankozar, если по проще, то можно посмотреть на root

[Вадим]

Ankozar, Но то что Вы хотите сделать к основам Vue явно не относится. Если Вы таким образом хотите понять основы реактивности и как обновляется DOM при изменении данных, то есть варианты намного проще.
Вы сказали

при изменении ориентации экрана

то есть это возможно только на мобильных девайсах, когда пользователь поворачивает устройство из портретной ориентации в альбомную или наоборот.

Это событие существует только на клиенте.

И вот вопрос Вам на будущее, на подумать: если Вы делаете такое для vue-приложения, для которого нужен серверный рендеринг в целях SEO продвижения, например, то в каком состоянии Вы будете отрисовывать интерфейс? Для портретного режима? Или для альбомного? Вопрос риторический, мне отвечать не нужно.