[Vuejs]-Pause functions on page history forward backward

by

1👍

✅

Try using the beforeDestroy() hook to push the counter to either the root component or to vuex store (if you are using one) and fetch the counter in the mounted() hook once you return to the route to resume from there.

and use in your component as

export default {
...
    beforeDestroy () {
        this.$root.counter = this.counter;
    },
    mounted () {
        this.counter = this.$root.counter || 0;
    }
...
}

I have created a sandbox at https://codesandbox.io/s/preserve-timer-state-2osi7 which preserves the state of timer when we move out of the route and starts the timer from where we left.

Comment Notes:

As per you comment, it seems that you are trying to set a property to an object which is undefined. Initially there is no property by the name initialValue in the root component and you are trying to access a property A inside it.

You need to first check if initialValue is defined and then try to check for A

this.initialValue.A = this.$root.initialValue && this.$root.initialValue.A ?  this.$root.initialValue.A : 3

Also make sure your data has initialValue as an empty object

initialValue: {}
👤Saksham

Leave a comment