whenever

値が真であることを監視するための省略形。

使用法

import { useAsyncState, whenever } from '@vueuse/core'

const { state, isReady } = useAsyncState(
  fetch('https://jsonplaceholder.typicode.com/todos/1').then(t => t.json()),
  {},
)

whenever(isReady, () => console.log(state))

import { whenever } from '@vueuse/core'
// ---cut---
// このように
whenever(ready, () => console.log(state))

// は次のものと同等です:
watch(ready, (isReady) => {
  if (isReady)
    console.log(state)
})

コールバック関数

watch と同様に、コールバックは cb(value, oldValue, onInvalidate) で呼び出されます。

import { whenever } from '@vueuse/core'
// ---cut---
whenever(height, (current, lastHeight) => {
  if (current > lastHeight)
    console.log(`Increasing height by ${current - lastHeight}`)
})

Computed

watch と同様に、変更ごとに計算するためのゲッター関数を渡すことができます。

import { whenever } from '@vueuse/core'
// ---cut---
// このように
whenever(
  () => counter.value === 7,
  () => console.log('counter is 7 now!'),
)

オプション

オプションとデフォルトは watch と同じです。

import { whenever } from '@vueuse/core'
// ---cut---
// このように
whenever(
  () => counter.value === 7,
  () => console.log('counter is 7 now!'),
  { flush: 'sync' },
)