Vue3:不能观察到外部JS文件中定义的变量的变化

Question

我有一个导入到mainComponent上的外部脚本。vue，它管理一些进程，到目前为止我不能做的是监听设置程序结束的布尔变量的变化:

externalScript.js:

export let kmcFinished = false;
export getVariables;
...
export function endProgram(){
...
kmcFinished = true;
}
export function getVariables(){
return {
...*other variables*
kmcFinished
}
}

MainComponent.vue

import {getVariables} from "@/components/js/externalScript.js"; 
... 
<script> 
... 
computed:{       
getFinishState(){        
console.log(getVariables().kmcFinished); // Here console shows only once false value
return getVariables().kmcFinished;       
}     
},     
watch: {     
getFinishState: {       
handler(newVal){         
console.log(newVal); // This console.log never executes, why?         
if (newVal) {         
saveSessionState(); // So this never gets done, as never receives 'true'         
}       
},       
deep:true     
}   
}, 
... 
</script>

我试过用update:来代替，但至今没有成功。

Answer 1

它的方式是，getVariables()在一个用变量kmcFinished的当前值初始化的新对象上创建一个名为kmcFinished的新属性。当kmcFinished改变时，属性不会改变(正如您已经观察到的)。

但是你可以把kmcFinished变成ref:

import {ref} from 'vue'
export const kmcFinished = ref(false);
...
export function endProgram(){
...
kmcFinished.value = true;
}
export function getVariables(){
return {
...
kmcFinished
}
}

现在你有了一个内部状态的ref，你可以通过.value属性观察和改变它:

data:{
isFinished: getVariables().kmcFinished // no need to put this into a computed
},
watch: {
isFinished() {
if (this.isFinished.value) {         
...          
}
}   
},

顺便说一句。您所做的看起来非常接近Vue中的可组合。这可能是一个熟悉结构的好机会。