watchTriggerable

手動でトリガーできるウォッチ

使用法

WatchCallbackを手動でトリガーすることをサポートするwatchラッパーで、WatchCallbackを即座に実行するための追加のtriggerを返します。

import { watchTriggerable } from '@vueuse/core'
import { nextTick, shallowRef } from 'vue'

const source = shallowRef(0)

const { trigger, ignoreUpdates } = watchTriggerable(
  source,
  v => console.log(`Changed to ${v}!`),
)

source.value = 'bar'
await nextTick() // ログ: Changed to bar!

// `trigger`を介したWatchCallbackの実行は待機を必要としません
trigger() // ログ: Changed to bar!

onCleanup

onCleanupパラメータを使用するwatchを手動で呼び出したい場合、単にWatchCallbackを取り出して呼び出すだけでは、onCleanupパラメータを簡単に実装することはできません。

watchTriggerableを使用することで、この問題を解決できます。

import { watchTriggerable } from '@vueuse/core'
import { shallowRef } from 'vue'

const source = shallowRef(0)

const { trigger } = watchTriggerable(
  source,
  async (v, _, onCleanup) => {
    let canceled = false
    onCleanup(() => canceled = true)

    await new Promise(resolve => setTimeout(resolve, 500))
    if (canceled)
      return

    console.log(`The value is "${v}"\n`)
  },
)

source.value = 1 // ログなし
await trigger() // ログ（500 ms後）: The value is "1"