Using Vue (vuex) global variables in multiple components, how to optimize?

Question

JavaScript

Hey!
There is a web application, the main page of which consists of several large tab-switched components, which, in turn, have a number of child modules.
The vuex store has a global variable (String) activeTabthat is responsible for the content displayed on the main page of the application.

What components use the variable?

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

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

Thus, we get the variable from the storage

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

It is used only in conditions v-show=""and :class=""in both components.

Problem

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

What was I trying to do?

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

How can this use of a global variable be optimized so that tab switching is instantaneous?

Answer 1

Working with vuex has nothing to do with it. You yourself said that these are large components.
v-show only does display: none/block
v-if removes the markup from the DOM and redraws it, which is way more expensive than just hiding the
block make the condition for creating the body of the tab through v-if, and hide/show do it through v-show