Как получить доступ к переменной данных на странице для управления div в файле макета

Question

Я создаю простое приложение Nuxt JS, используя Vuetify. У меня есть настройки моего макета как default.vue и у меня есть Navbar в этом файле, у меня есть <div> в моей навигационной панели, которая по сути является иконкой, я хотел бы иметь возможность показать / скрыть и получить доступ к этому элементу div и управлять им со страницы, например: index.vue в пределах страниц / каталога.

Я хотел бы иметь переменную, такую ​​как: isShown: true а затем добавить v-if="isShown" к моему div, однако, поскольку это в макете, это не работает.

Answer 1

Одно из решений, которое может быть вам знакомо, - это иметь единый источник правды. isShown в магазине, который вы можете легко разделить между layout/default.vue и pages/index.vue

Другое решение может полагаться на глобальную шину событий, но, честно говоря, даже если вы можете решить эту проблему с ее помощью, его не нужно использовать.