vuex 如何清空setInterval

Question

缘由：
在子路由里有个setInterval，一直不停调用某个接口，但是回到其他页面或者父路由页面就要清空这个setInterval；
在这个子组件中定义setInterval为timer，当然可以清空，不过在其他页面中是找不到这个timer的，
所以想到用vuex处理；

    mounted(){
        this.init();
        // this.$store.dispatch('fetchPageList');
    },
    methods:{
        backTrack(){
            this.$store.commit('showBg',false);
            // clearInterval(this.$store.commit('changeKeepInter',undefined));
        },
        init(){
            let _time = new Date().getTime();
            this.$http.get('https://xx?appkey=' + this.appId + '&os=' + this.plat + '&timestamp=' + _time,{
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8;'
                }
            })
            .then((data)=>{
                this.$store.commit('changeKeepInter',setInterval(function(){
                    console.log('打印');
                    ／／ to do
                },2000));
            },(err)=>{

            })

        }
    }

如上，不知道怎么clearInterval 这个timer（changeKeepInter的值）？刚接触vuex，有不了解的地方，请各位大神指教！

因为我需要在其他页面中用到这个setInterval，需要在其他页面中手动清空，请问这个该怎么处理？

Answer 1

在你路由destroyed的时候清掉呗。

export default {
    data() {
        return {
            someTimer: null
        }
    },
    methods: {
        someFunc() {
            this.someTimer = setInterval(() => {}, 2000);
        }
    },
    destroyed() {
        this.someTimer && window.clearInterval(this.someTimer);
    }
}

Answer 2

既然你回到其他页面或者父路由页面就要清空这个setInterval。
那么这个定时器就应该在它所在组件的生命周期内自生自灭。组件 destroyed 的时候清除就好了。

Answer 3

路由导航钩子
beforeRouteLeave(to,from,next){

//清除代码...
next();

}

Answer 4

1.你应该在当前页面吧setInterval返回的id存到store里面
2.在另外一个页面里通过store拿到这个id，然后直接在这个页面里调用clearInterval，同时把store里的id清空