Как запретить уничтожать компонент при переходе между роутами?

Question

[Дмитрий]

Здравствуйте.
Простой пример описывающий проблему:
На одном компоненте роутера запускается таймер, но при переходе на другой роутер таймер уничтожается и при повторном переходе на эту страницу запускается по новой.
Как избежать этой ситуации? Допустим я хочу отображать этот таймер(или другие реалтайм данные) на главной странице, или допустим есть запрос к api сервера и обработка этого ответа, получается что при каждом переходе на страницу, компонент будет создаваться по новой, пересчитываться данные и т.д. каждый раз? Возможно ли создать компонент на странице и не уничтожать его при переходе на другую страницу?

Answer 1

[Aetae]

Чтоб сохранять компоненты в памяти у Vue есть <keep-alive>.
Но, думаю, это не то что вам надо, а надо вам независимое от компонентов хранилище.
Вы можете использовать для этого Vuex или обойтись простым реактивным объектом: в Vue 2 такой можно получить через Vue.observable, в Vue 3 просто через Vue.ractive.

Comments

[Aetae]

Дмитрий, так пусть не кидает.

[Дмитрий]

Я пользуюсь vuex, но это не решает проблему, т.к. компонент при переходе на него, кидает в хранилище вновь созданные данные.

[Дмитрий]

Aetae, В смысле

так пусть не кидает.

? Вы вопрос вообще читали?

[Aetae]

Дмитрий, нет, серьёзно, отдели логику от компонента в отдельный сервис, кторый будет работать с таймером независимо. Из компонента просто вызывай определённые методы\функции этого сервиса. С проверками всякими, на активность таймера и прочее.

[Дмитрий]

Aetae, А просто сохранять компонент получается нельзя?

[Aetae]

Дмитрий, можно - смотри первую строчку моего ответа.

Answer 2

[Дмитрий]

В общем действительно keep-alive помог, а именно:

<router-view v-slot="{ Component }">
            <keep-alive>
                <component :is="Component"></component>
            </keep-alive>
        </router-view>