@reactivity-vue/when

Promised one time watch for @vue/reactivity

Install

npm install --save-dev @reactivity-vue/when

Usage

Wait for some async data to be ready

import { when } from '@reactivity-vue/when'

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

await when(ready).toBe(true)

console.log(state) // state is now ready!

Wait for custom conditions

You can use invoke to call the async function.

import { invoke, when } from '@reactivity-vue/when'

const { count } = useMyCounter()

invoke(async () => {
  await when(count).toMatch(v => v > 7)

  alert('Counter is now larger than 7!')
})

Timeout

// will be resolve when ref.value === true or 1000ms passed
await when(ref).toBe(true, { timeout: 1000 })

// will throw if timeout
try {
  await when(ref).toBe(true, { timeout: 1000, throwOnTimeout: true })
  // ref.value === true
}
catch (e) {
  // timeout
}

More Examples

await when(ref).toBe(true)
await when(ref).toMatch(v => v > 10 && v < 100)
await when(ref).changed()
await when(ref).changedTimes(10)
await when(ref).toBeTruthy()
await when(ref).toBeNull()
await when(ref).toBeNaN()
await when(ref).toContain(5)

await when(ref).not.toBeNull()
await when(ref).not.toBeTruthy()

License

MIT License © 2023 Elone Hoo