我有一个Vue组件,它被包装在一个<keep-alive>
标签中,以防止重新渲染.
在组件中,我想通过触发一个方法来对全局数据中的一些变化做出react .但是,我只想在组件当前处于活动状态时触发该方法.
现在,我正在做这样的事情:
export default {
data() {
return {
globalVar: this.$store.state.var,
isComponentActive: false,
};
},
methods: {
foo() { console.log('foo') };
},
watch: {
globalVar() {
if (this.isComponentActive) {
this.foo();
}
},
},
activated() {
this.isComponentActive = true;
},
deactivated() {
this.isComponentActive = false;
},
}
但我希望组件实例中已经有一个属性可以引用.比如:
export default {
data() {
return { globalVar: this.$store.state.var };
},
methods: {
foo() { console.log('foo') };
},
watch: {
globalVar() {
if (this.$isComponentActive) {
this.foo();
}
},
},
}
我在the documentation for the <keep-alive>
tag个房间里找不到这样的东西.而且,看看Vue实例,它似乎没有属性.但是,有没有人知道一种方法可以让我获得Vue实例的"激活"状态,而不必自己通过钩子来维护它?