我有useCountdown
可组合:
const TIME_LIMIT = 180
export default () => {
const timePassed = ref(0)
const timerInterval = ref(null)
const timeLeft = computed(() => TIME_LIMIT - timePassed.value)
const formattedTimeLeft = computed(() => {
const _timeLeft = timeLeft.value
const minutes = Math.floor(_timeLeft / 60)
let seconds = _timeLeft % 60
if (seconds < 10) {
seconds = `0${seconds}` as unknown as number
}
return `${minutes}:${seconds}`
})
const startTimer = () => {
timerInterval.value = setInterval(() => (timePassed.value += 1), 1000)
}
const onTimesUp = () => {
clearInterval(timerInterval.value)
timePassed.value = 0
timerInterval.value = null
startTimer()
}
watch(timeLeft, (newVal) => {
if (newVal === 0) {
onTimesUp()
}
})
onMounted(() => startTimer())
return {
formattedTimeLeft,
startTimer,
onTimesUp,
}
}
在应用程序初始化计数器启动,但我还需要使用startTimer
和onTimesUp
在其他组合时,我得到了一些事件。
我想在某个组件中显示formattedTimeLeft
,但当我收到应调用onTimesUp
然后调用startTimer
的事件时,页眉中的formattedTimeLeft
未更改。
如何使formattedTimeLeft
全球可用?
1条答案
按热度按时间mwg9r5ms1#
这种情况以前也发生过,在你使用的每个组件中,composable都会被重新创建,就像
Class
,想象一下每次你调用useCountdown()
,它都会创建一个新的示例,比如new ClassName()
。要使“共享”成为可组合的,可以将所有状态移到外部
或者,如果您正在使用VueUse,请使用此链接-https:vueuse.org/shared/createSharedComposable/
祝你好运!