Stopping a Action in Vuex

Hello!

this.$store.dispatch("TIMER", true);

this a action , it has

const time = setInterval(() => { context.commit('reduceTimer';) }, 1000;)

the action is called when mounted , but when i go to another page its still running! , is there any way to stop this?

and destory the const time

Level 51

You can use clearInterval

In your store you add a property to store the interval.

let store  = {interval: null},

Store the interval when calling it.

TIMER(){
		store.x = setInterval(() => { context.commit('reduceTimer';) }, 1000;)
}

Then you create another action to clear it

actionName() {
	clearInterval(store.interval);
}

Then call the action that clear it on every route change.

new Vue({
  // ...
  watch: {
    '$route': function(to, from) {
     	store.dispatch('actionName');
    }
  }
})

PS: I didn't use mutations just for simplicity.

Level 1

@MohamedTammam Thanks a lot , it worked ,

Level 51

@mrphp Glad to hear that, please mark the discussion as solved.

Please or to participate in this conversation.