Использование глобальных переменных Vue (vuex) в нескольких компонентах, как оптимизировать?

Question

[Михаил Мирошниченко]

Привет!

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

В хранилище vuex есть глобальная переменная (String) activeTab, которая отвечает за содержимое, отображаемое на главной странице приложения.

В каких компонентах используется переменная?

Переменная используется в 2 компонентах:

1. 
   
2. 1. Home.vue (основной компонент главной страницы)
   
3. 2. HomeForms.vue (компонент, в котором содержится форма с вкладками - является дочерним компонентом к Home.vue)
   

Таким образом достаем перменную из хранилища

import {mapGetters} from "vuex";
....
computed: {
     ...mapGetters({
          .....
               activeTab: "getActiveTab",
          .....
     })
},

Используется она только в условиях v-show="" и :class="" в обоих компонентах.

Проблема

Проблема заключается в том, что если обращаться к переменной только в одном из компонентов (например, в HomeForms.vue назначать класс активной вкладке) - переключение вкладок происходит мгновенно, но, если использовать ее еще в одном компоненте (например ,в HomeForms.vue просто добавить тег div с условием v-if="activeTab == '...'",, то переключение осуществляется 2-3 секунды.

Что я пытался сделать?

Пробовал в компоненте Home.vue получать переменную, а в HomeForms.vue обращаться к ней через $parent.activeTab - не помогло.
* в компоненте HomeForms.vue при переключении вкладок также изменяется значение этой переменной:
this.$store.commit('setActiveTab', key);

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

Answer 1

[Дима Паутов]

Работа с vuex тут не причём. Вы сами сказали, что это большие компоненты.
v-show делает лишь display: none/block
v-if удаляет разметку из DOM и рисует её заново, на что тратиться гораздо больше ресурсов, нежели просто скрыть блок

Делайте так, сначала, создавайте тело вкладки лишь тогда, когда вы запросили содержимое вкладки и сделайте условие создания тела вкладки через v-if, а скрытие/показ делайте через v-show

Comments

[Михаил Мирошниченко]

Для тестирования я просто использовал v-show на html-div-элементе (компонент Home.vue)
<div v-show="activeTab == '...'">Test div</div>
Код в HomeForms.vue отрабатывает мгновенно, если в Home.vue добавляем вот такое простое условие - 2-3 секунды.

UPD: Скрытие/показ будет везде через v-show. Компоненты, которые используются в содержимом вкладок формы, а также на странице подгружают свои, довольно громоздкие, данные с сервера, использование :is или v-if заставит их это делать заново при ре-рендеринге.