vue.js 可组合对象中的函数用于其他两个可组合对象

mnowg1ta  于 2023-01-21  发布在  Vue.js
关注(0)|答案(1)|浏览(220)

我有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,
  }
}

在应用程序初始化计数器启动,但我还需要使用startTimeronTimesUp在其他组合时,我得到了一些事件。
我想在某个组件中显示formattedTimeLeft,但当我收到应调用onTimesUp然后调用startTimer的事件时,页眉中的formattedTimeLeft未更改。
如何使formattedTimeLeft全球可用?

mwg9r5ms

mwg9r5ms1#

这种情况以前也发生过,在你使用的每个组件中,composable都会被重新创建,就像Class,想象一下每次你调用useCountdown(),它都会创建一个新的示例,比如new ClassName()
要使“共享”成为可组合的,可以将所有状态移到外部

const timePassed = ref(0)
const timerInterval = ref(null)
const timeLeft = computed(() => ...)
const formattedTimeLeft = computed(() => ...)

const useCountdown = () => {
  ...
  return {
    formattedTimeLeft
  }
}

或者,如果您正在使用VueUse,请使用此链接-https:vueuse.org/shared/createSharedComposable/
祝你好运!

相关问题