kozy Posts - Answer Overflow

kozy

•Created by kozy on 3/27/2025 in #❓・help

useAsyncData with pinia

I was reading through the documentation on useAsyncData and I noticed that it mentioned:

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 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 / 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()
})

5 replies

NNuxt

•Created by kozy on 2/26/2025 in #❓・help

Store usage/relevance with Nuxt 3

When working on my various Vue 2 projects (around 5 SPA web applications) I found Vuex incredibly useful. Namely, it provided a single place for my logic around interfacing with my .NET API, as well helping share state between components. However, as I've started writing more in Vue 3, especially given nuxt composables/plugins like $fetch, useFetch, useAsyncData, callOnce, useState, etc. I've found myself struggling to justify this default of 'relates to api data, put it in the store'. For instance, I'll have a card that needs some async data. If I load it in the card, I have access to the returns/capabilities of useFetch like watch, error, loading, etc. If i wanted that call in the store, i would need to expose each of these. Furthermore, my stores become a bunch of inline composables related to components. I'm curious if anyone else has had a similar experience/any thoughts. Happy to go into more detail

5 replies

NNuxt

•Created by kozy on 8/22/2024 in #❓・help

nuxi update

should nuxt be installed as a regulard or dev dependency? I previously had it as a regular dependency, but after running the recommended nuxi update command it ended up as a dev dependency

2 replies

Gaming

Programming