在Vuejs路由之间切换时清除间隔

Question

我遇到一个问题，当我导航到应用程序的另一个路由时，来自Vue组件的Interval一直在运行。

我正在使用Vue路由器，有下一个配置：

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
}

]

间隔在AllElement组件中。当我使用Vue路由器时，AllElement被加载到router-view中，当我切换到Home.Vue组件时，它将被加载到router-view中，但AllElement的间隔将继续运行。

这是开始的间隔

mounted() {
this.fetchLastBucketData();
setInterval(() => {
this.fetchLastBucketData();
}, 3000);
}

有什么解决方案吗？

Answer 1

将setInterval分配给数据属性，并在组件卸载时清除：

data(){
return{
interval:null;
};
},
mounted() {
this.fetchLastBucketData();
this.interval =  setInterval(() => {
this.fetchLastBucketData();
}, 3000);
},
unmounted(){ // destroyed  in Vue 2
clearInterval(this.interval)
}

成分API：

import {ref,onMounted,onUnmounted} from 'vue'
....
const interval =ref(null)
onMounted()=> {
fetchLastBucketData();
interval.value =  setInterval(() => {
fetchLastBucketData();
}, 3000);
})
onUnmounted(()=>{ 
clearInterval(interval.value)
}
)

Answer 2

我假设您使用的是Vue-3。

您需要添加代码来清除间隔。由于您希望间隔在路由更改时停止，因此应该将其放置在未安装的钩子中(在Vue-2中销毁(。类似这样的东西：

mounted() {
this.fetchLastBucketData();
this.canvasInterval = setInterval(() => {
this.fetchLastBucketData();
}, 3000);
}
unmounted() {
clearInterval(this.canvasInterval); // - Clears Interval
}