How can I get stored value in Vue 3?

Question

I want to get the value of my stored user from my store

but when I tried on onMounted function

onMounted(async () => {
       console.log('user', store.state.user)  //here i can see the values
        const info = computed(() => {
        return store.state.user
      })
      console.log('info', info)

it does not give the information, I am getting info.name undefined

what happening here?

Related: https://stackoverflow.com/questions/23392111/console-log-async-or-sync — Estus Flask, Jan 25 '22 at 05:03

score 4 · Accepted Answer · answered Jan 25 '22 at 04:47

4

info is a ref, it cannot have info.name. It's a mistake to use computed inside mounted hook, it should be directly inside setup:

const info = computed(() => store.state.user)

onMounted(async () => {
      console.log('info', info.value)
});

store.state.user value is not guaranteed to be up-to-date at the time when it's accessed. In case it changes during the component's lifespan, it needs to be accessed inside a watcher or another computed property.

answered Jan 25 '22 at 04:47

Estus Flask

179,509
61
360
499

i think i need to use an observer, because your answer does not worked – signup Jan 25 '22 at 04:58
It should be no different than using store.state.user directly. In case store.state.user.name is not available at this moment then yes, you need to watch the value or postpone the component where it's used. – Estus Flask Jan 25 '22 at 05:02
please i want to postpone the component – signup Jan 25 '22 at 05:13
See https://v3.vuejs.org/guide/migration/suspense.html#introduction – Estus Flask Jan 25 '22 at 05:16
help me with watch the value please – signup Jan 25 '22 at 05:29
It's `watchEffect(() => { console.log('info', info.value) })` – Estus Flask Jan 25 '22 at 05:36

How can I get stored value in Vue 3?

1 Answers1