Reactive Vuex store getter in plugin provide

Migrating a Nuxt 2 project so excuse the strange behaviour.

Is there a way to make $app reactive here?

export default defineNuxtPlugin(nuxtApp => {
  const { $store } = useNuxtApp()

  return {
    provide: {
      app: $store.getters['app/getApp']
    }
  }
})

export default defineNuxtPlugin(nuxtApp => {
  const { $store } = useNuxtApp()

  return {
    provide: {
      app: $store.getters['app/getApp']
    }
  }
})

inside a component script setup:

const { $app } = useNuxtApp() 
console.log($app)

const { $app } = useNuxtApp() 
console.log($app)

$app is correctly showing the store response, but it's not up to date.

I've tried wrapping it in a ref() but that didn't help:

provide: {
  app: ref($store.getters['app/getApp'])
}

provide: {
  app: ref($store.getters['app/getApp'])
}

Nuxt•11mo ago•

3 replies

Titan

Reactive Vuex store getter in plugin provide

Migrating a Nuxt 2 project so excuse the strange behaviour.

Is there a way to make $app reactive here?

export default defineNuxtPlugin(nuxtApp => {
  const { $store } = useNuxtApp()

  return {
    provide: {
      app: $store.getters['app/getApp']
    }
  }
})

export default defineNuxtPlugin(nuxtApp => {
  const { $store } = useNuxtApp()

  return {
    provide: {
      app: $store.getters['app/getApp']
    }
  }
})

inside a component script setup:

const { $app } = useNuxtApp() 
console.log($app)

const { $app } = useNuxtApp() 
console.log($app)

$app is correctly showing the store response, but it's not up to date.

I've tried wrapping it in a ref() but that didn't help:

provide: {
  app: ref($store.getters['app/getApp'])
}

provide: {
  app: ref($store.getters['app/getApp'])
}

Reactive Vuex store getter in plugin provide

Similar Threads

Reactive Vuex store getter in plugin provide

Similar Threads

Similar Threads

Similar Threads