VueUsewhenever ​
Shorthand for watching value to be truthy.
Usage ​
js
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 { 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))ts
// this
whenever(ready, () => console.log(state))
// is equivalent to:
watch(ready, (isReady) => {
if (isReady)
console.log(state)
})// this
whenever(ready, () => console.log(state))
// is equivalent to:
watch(ready, (isReady) => {
if (isReady)
console.log(state)
})Callback Function ​
Same as watch, the callback will be called with cb(value, oldValue, onInvalidate).
ts
whenever(height, (current, lastHeight) => {
if (current > lastHeight)
console.log(`Increasing height by ${current - lastHeight}`)
})whenever(height, (current, lastHeight) => {
if (current > lastHeight)
console.log(`Increasing height by ${current - lastHeight}`)
})Computed ​
Same as watch, you can pass a getter function to calculate on each change.
ts
// this
whenever(
() => counter.value === 7,
() => console.log('counter is 7 now!'),
)// this
whenever(
() => counter.value === 7,
() => console.log('counter is 7 now!'),
)Options ​
Options and defaults are same with watch.
ts
// this
whenever(
() => counter.value === 7,
() => console.log('counter is 7 now!'),
{ flush: 'sync' },
)// this
whenever(
() => counter.value === 7,
() => console.log('counter is 7 now!'),
{ flush: 'sync' },
)Type Declarations ​
typescript
/**
* Shorthand for watching value to be truthy
*
* @see https://vueuse.org/whenever
*/
export declare function whenever<T>(
source: WatchSource<T | false | null | undefined>,
cb: WatchCallback<T>,
options?: WatchOptions
): WatchStopHandle/**
* Shorthand for watching value to be truthy
*
* @see https://vueuse.org/whenever
*/
export declare function whenever<T>(
source: WatchSource<T | false | null | undefined>,
cb: WatchCallback<T>,
options?: WatchOptions
): WatchStopHandleSource ​
Contributors ​
Anthony Fu
freakzlike
donotloveshampo
Chung, Lian
Alex Kozack