Ionic Vue | Let Page Remain 'Alive' in Router

Ionic Framework Ionic Vue
1

Is there the possibility to let an Ionic Page stay ‘alive’ although the user is using an ion-back-button?

I am thinking about the following use case:
I want that that an user can create instances of a child page which should always countdown from 5 minutes. each instance of a page shouldn’t be destroyed when the user goes back to the parent page but stay alive and remain counting down in the background. these pages should be possible to be opened up again later

2

I feel like I have to rephrase what I want to do:

I want to create pages which should have a timer of 5 minutes countdown. these pages can be closed in-between and reopened again. do I always need to remember the current timer count when it is closed or is there another way to leave specific pages alive?

3

the pages are kept in memory, they are “alive” the information to on the page can be save in storage or a state manager to keep track of everything

4

also when you use the ion-back-button or go back on the mobile? the page is popped from router or?

nonetheless. I will try to get my head around this article by @mikehartington - however I am using a sqlite database for the states but might use the storage for the timers

5

the page is popped from router but it is still in DOM, the article is information but it might be overkill… vuex is AN approach, the THE approach, you can manage state using composition API, even with simple observable and ref

6

I understand. when I want to open a closed page again I need to use/load the saved state then I guess? I am also asking because there would be a timer running on a closed page. is it still running or do I need to handle it by myself and memorize the timer?

about your proposals I looked into the simple observable and ref with a solution like here or here

this might be enough but I would have several page states with their respective data (the timer number and a list of values [for each page]) to load again. would you recommend the Vuex approach or could I handle all the page states in an array with the observable pattern?

7

you can use the composition api to manage state - Ionic VueJS - Vue 3 Composition API for State Management with Ionic Framework - YouTube

8

thank you very much @aaronksaunders . you literally opened my eyes with that video and its essential content. got me completely out of my box

I might have two related questions. 1.: if a ref variable containing an array gets set again with another array - is that step reactive? meaning does UI get notice of that? update and answer: yes it does

  1. and again about the life cycle and what you said before: here it says

Pages are only removed from the DOM when they are “popped”, for instance, by pressing the back button in the UI or the browsers back button.

thus I am still not sure what is happening in my case whereas I have a page with a parameter which gets removed (back button) and is called again with the same parameter. since I have the problem that it is several times in the DOM

9

helllooo… my other account was pinged so just seeing this. Whats up?