Me enfrento a un problema en el que un intervalo de un componente Vue sigue ejecutándose cuando navego a otra ruta de mi aplicación.
Estoy usando el enrutador Vue, con la siguiente configuración:
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/login',
name: 'Login',
component: LoginMenu
},
{
path: '/canvas',
name: 'Canvas',
component: AllElement
},
{
path: '/querybuilder',
name: 'QueryBuilder',
component: QueryBuilder
},
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard
}
]
El intervalo está en el componente AllElement. Como estoy usando el enrutador Vue, AllElement se carga en la router-view , y cuando cambio al componente Home.vue, se cargará en la router-view pero el intervalo de AllElement seguirá ejecutándose.
Aquí es donde se inicia el intervalo
mounted() {
this.fetchLastBucketData();
setInterval(() => {
this.fetchLastBucketData();
}, 3000);
}
¿Alguna solución?
Asigne setInterval a una propiedad de datos y borre cuando el componente esté desmontado :
data(){
return{
interval:null;
};
},
mounted() {
this.fetchLastBucketData();
this.interval = setInterval(() => {
this.fetchLastBucketData();
}, 3000);
},
unmounted(){ // destroyed in Vue 2
clearInterval(this.interval)
}
en la API de composición:
import {ref,onMounted,onUnmounted} from 'vue'
....
const interval =ref(null)
onMounted()=> {
fetchLastBucketData();
interval.value = setInterval(() => {
fetchLastBucketData();
}, 3000);
})
onUnmounted(()=>{
clearInterval(interval.value)
}
)
Supongo que estás usando Vue-3.
Debe agregar el código para borrar el intervalo. Dado que desea que el intervalo se detenga en el cambio de ruta, debe colocarse en el gancho desmontado (destruido en Vue-2). Algo como esto:
mounted() {
this.fetchLastBucketData();
this.canvasInterval = setInterval(() => {
this.fetchLastBucketData();
}, 3000);
}
unmounted() {
clearInterval(this.canvasInterval); // - Clears Interval
}