useASyncData & watch issue

Hello friends,
I've been having a hard time using watch. I've finally found a suitable ref for watch, but the refresh is too late. My store update but what is displayed is one step behind.
If i change the lang from fr to en, it'll show fr, and from en to es, it'll show es.
What am I missing ?
If I use a plugin with

nuxtApp.hook('i18n:localeSwitched',

nuxtApp.hook('i18n:localeSwitched',

and manually call refresh, it works as I would like it to.
Thanks for your time !

import { JobActionsLocal } from "./proto/job_action";
const key = 'job_action'

export const useJobActionStore = defineStore(key, () => {
  function mapper(data: JobAction[]) {
    return new Map(
      data.map((raw) => {
        return [raw.uid, raw]
      })
    )
  }

  const { locale } = useI18n()

  const {data: actions, pending, error, refresh: clear_cache} = useAsyncData(
    key,
    () => ifetch(key, `jobs/actions`, JobActionsLocal, mapper),
    {
      server: false,
      lazy: true,
      watch: [locale],
      deep: false
    }
  )

  return {actions}
})

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useJobStore, import.meta.hot))
}

import { JobActionsLocal } from "./proto/job_action";
const key = 'job_action'

export const useJobActionStore = defineStore(key, () => {
  function mapper(data: JobAction[]) {
    return new Map(
      data.map((raw) => {
        return [raw.uid, raw]
      })
    )
  }

  const { locale } = useI18n()

  const {data: actions, pending, error, refresh: clear_cache} = useAsyncData(
    key,
    () => ifetch(key, `jobs/actions`, JobActionsLocal, mapper),
    {
      server: false,
      lazy: true,
      watch: [locale],
      deep: false
    }
  )

  return {actions}
})

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useJobStore, import.meta.hot))
}

Nuxt•2y ago•

1 reply

Wild

useASyncData & watch issue

nuxtApp.hook('i18n:localeSwitched',

nuxtApp.hook('i18n:localeSwitched',

and manually call refresh, it works as I would like it to.
Thanks for your time !

import { JobActionsLocal } from "./proto/job_action";
const key = 'job_action'

export const useJobActionStore = defineStore(key, () => {
  function mapper(data: JobAction[]) {
    return new Map(
      data.map((raw) => {
        return [raw.uid, raw]
      })
    )
  }

  const { locale } = useI18n()

  const {data: actions, pending, error, refresh: clear_cache} = useAsyncData(
    key,
    () => ifetch(key, `jobs/actions`, JobActionsLocal, mapper),
    {
      server: false,
      lazy: true,
      watch: [locale],
      deep: false
    }
  )

  return {actions}
})

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useJobStore, import.meta.hot))
}

import { JobActionsLocal } from "./proto/job_action";
const key = 'job_action'

export const useJobActionStore = defineStore(key, () => {
  function mapper(data: JobAction[]) {
    return new Map(
      data.map((raw) => {
        return [raw.uid, raw]
      })
    )
  }

  const { locale } = useI18n()

  const {data: actions, pending, error, refresh: clear_cache} = useAsyncData(
    key,
    () => ifetch(key, `jobs/actions`, JobActionsLocal, mapper),
    {
      server: false,
      lazy: true,
      watch: [locale],
      deep: false
    }
  )

  return {actions}
})

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useJobStore, import.meta.hot))
}

useASyncData & watch issue

Similar Threads

useASyncData & watch issue

Similar Threads

Similar Threads

Similar Threads