useAsyncData with pinia

I was reading through the documentation on

useAsyncData

useAsyncData

and I noticed that it mentioned:

useAsyncData
useAsyncData
is for fetching and caching data, not triggering side effects like calling Pinia actions, as this can cause unintended behavior such as repeated executions with nullish values. If you need to trigger side effects, use the
callOnce
callOnce
utility to do so.

with the following example:

const offersStore = useOffersStore()

// you can't do this
await useAsyncData(() => offersStore.getOffer(route.params.slug))

const offersStore = useOffersStore()

// you can't do this
await useAsyncData(() => offersStore.getOffer(route.params.slug))

I'm curious if you could provide more explanation on this... Specifically, if the presence of a key/or a single fetch without any computed url changes things.
In my case, I don't want to the call to block the route e.g.,

const userStore = useUserStore()

await useAsyncData('offers', store.getUser, {
  lazy: true
})

const userStore = useUserStore()

await useAsyncData('offers', store.getUser, {
  lazy: true
})

I'm aware I could move the logic out of the store and leverage the built-in cache from

useFetch

useFetch

useAsyncData

useAsyncData

.
Would something like this work as well?

const useUserStore = defineStore('use', () => {
  const user = ref<User>()

  function fetchUser() {
    // useFetch instead of $fetch
    const { data } = useFetch('', { lazy: true })
    user.value = data.value
  }
})

// script setup
await callOnce(async () => {
  await store.fetchUser()
})

const useUserStore = defineStore('use', () => {
  const user = ref<User>()

  function fetchUser() {
    // useFetch instead of $fetch
    const { data } = useFetch('', { lazy: true })
    user.value = data.value
  }
})

// script setup
await callOnce(async () => {
  await store.fetchUser()
})

Nuxt

Data Fetching · Get Started with Nuxt

Nuxt provides composables to handle data fetching within your application.

Nuxt•12mo ago•

4 replies

kozy

useAsyncData with pinia

I was reading through the documentation on

useAsyncData

useAsyncData

and I noticed that it mentioned:

useAsyncData
useAsyncData
is for fetching and caching data, not triggering side effects like calling Pinia actions, as this can cause unintended behavior such as repeated executions with nullish values. If you need to trigger side effects, use the
callOnce
callOnce
utility to do so.

with the following example:

const offersStore = useOffersStore()

// you can't do this
await useAsyncData(() => offersStore.getOffer(route.params.slug))

const offersStore = useOffersStore()

// you can't do this
await useAsyncData(() => offersStore.getOffer(route.params.slug))

const userStore = useUserStore()

await useAsyncData('offers', store.getUser, {
  lazy: true
})

const userStore = useUserStore()

await useAsyncData('offers', store.getUser, {
  lazy: true
})

I'm aware I could move the logic out of the store and leverage the built-in cache from

useFetch

useFetch

useAsyncData

useAsyncData

.
Would something like this work as well?

const useUserStore = defineStore('use', () => {
  const user = ref<User>()

  function fetchUser() {
    // useFetch instead of $fetch
    const { data } = useFetch('', { lazy: true })
    user.value = data.value
  }
})

// script setup
await callOnce(async () => {
  await store.fetchUser()
})

const useUserStore = defineStore('use', () => {
  const user = ref<User>()

  function fetchUser() {
    // useFetch instead of $fetch
    const { data } = useFetch('', { lazy: true })
    user.value = data.value
  }
})

// script setup
await callOnce(async () => {
  await store.fetchUser()
})

Nuxt

Data Fetching · Get Started with Nuxt

Nuxt provides composables to handle data fetching within your application.

useAsyncData with pinia

useAsyncData with pinia

Similar Threads

Similar Threads

Similar Threads