Ionic Vue watcher + variable in setup onBeforeUnmount

Ionic Framework Ionic Vue
1

I am using successfully a watcher for a specific timer variable. now however I need some computations inside the watcher to pass over to the setup onBeforeUnmount event. however how do I get the variable data inside the setup again or what is the correct way to do that?

here is some code:

setup: {
    let secondsText = "";

   onBeforeUnmount (async () => {
          console.log(secondsText);
    });
  return {
    secondsText 
  }
},

data() {
   return{
       timeCounterSeconds : 60
   }
},

watch: {
timeCounterSeconds: {

        immediate: true,
        handler(value){
                setTimeout(() => {
                    this.timeCounterSeconds -= 1;
                    this.secondsText= this.timeCounterSeconds.toString() + "aa";
                    
                }, 1000)
      }
}

secondsText is unfortunately always an empty string in the onBeforeUnmount event

Edit: to clarify the code. I used the second timer solution from here but want to have access to a variable outside the watch

2

It seems to me you have a number of issues here. For one, you don’t start the timer (via setTimeout) until timeCounterSconds changes. But then…you change timeCounterSeconds inside the watcher that watches for it changing…this doesn’t really make sense.

The other issue is that by mixing the new composition api with the old options api you are making things weirder and more difficult to deal with, I’d recommend going 100% composition api and getting rid of the data and watch properties.

3

I thought the data and watch properties are part of the new composition api. the timer actually runs. maybe its because of my shortened code. I am actually using the second solution from here - however any variable inside the watch I can’t access inside the data nor setup. is there a way?

or would you propose the first solution from the stackoverflow-link with the created to start the timer? this didn’t work for me however. but does it look more the way to go for you?

4

No, those are explicitly the old options api. I guess I don’t know exactly what you are trying to achieve…if all you want is to show a timer, it seems like you are greatly overcomplicating things. Just going to pseudo code this quickly, I have not tested this code, but it should work.

<template>
  <div>{{ secondsRemaining }}</div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const secondsRemaining = ref(60);
    setTimeout(() => secondsRemaining.value--, 1000);

    return {
      secondsRemaining
    }
  }
});
</script>
5

you are right. your solution is simple as it is elegant to just do what it should do. thank you

however I also want to pause and start the timer (and decide if the timer starts initially) and save the timer value when the page is closed. latter should be possible in your solution since I have the secondsRemaining variable in setup I think.
but pause/start which gets triggered via a method? is that possible? what would be the way without the watch pattern and within the setup or mounted timer?

6

you were right. my solution was way too difficult

your solution brought me on the right track. thank you very much @rlouie
(hint for others: the code snippet from rlouie will only count once. you have to repeat the setTimeout)