Watch state property just once

[3zzy]

I need to await a state property (object) to contain all truthy values, and I just need it once and inside an async function so don't think watcher would help.

state: () => ({
    myData: {
      key1: null,
      key2: null,
      key3: null,
    }
})

// do async ops that mutate myData

const someFunction = async () => {
    await Object.values(state.myData).every(v => !!v)
    // continue ...
}

Wonder whats the best way to achieve this?
Thanks!

[userquin]

[userquin]

https://vueuse.org/shared/until/

[3zzy]

This is awesome! Thanks, will checkout out both.

I'd still like to know if there's a way to do it without the use of any external dependencies, possibly using just Vue or Pinia methods.

[userquin]

Promise race, just see the source but I suggest you see all stuff on vueuse it is amazing

[userquin]

It is treeshakeable so do not reinvent the wheel... ;) there you have small funtions doing their work very well

[posva]

You could do it manually without vueuse but it would be similar to their code: https://github.com/vueuse/vueuse/blob/main/packages/shared/until/index.ts#L84-L97

stop = watch(
        () => myStore.myData,
        (myData) => {
          if (allTrue(myData)) {
            // remove watcher
            stop()
            someFunction()
          }
        },
        {
		  // depending on your code, you might need to configure these
          flush,
          deep,
          immediate: true,
        },
      )

[3zzy]

That’s exactly what I was doing, Burt looks like VueUse makes sense. Thanks!