Problem getting data from Pinia

I have a component used within my layout that is responsible for setting user information. However, when I try to access this user info from another component located deeper in the component tree, it returns null.

navbar.vue

<script lang="ts" setup>
const userStore = useUserStore();
const { status, refresh } = await useAsyncData(async () => {
    if (userStore.info)
        return true;

    await userStore.fetchUserInfo();
    return true;
});
</script>

<script lang="ts" setup>
const userStore = useUserStore();
const { status, refresh } = await useAsyncData(async () => {
    if (userStore.info)
        return true;

    await userStore.fetchUserInfo();
    return true;
});
</script>

test.vue

<script lang="ts" setup>
const store = useUserStore();
console.log(store.info); // null
</script>

<script lang="ts" setup>
const store = useUserStore();
console.log(store.info); // null
</script>

i logged them and it seems the problem is that test.vue runs before navbar.vue

file structure

- dashboardLayout
-- navbar.vue // -> getting data here
-- TestLayout
--- AComponent.vue
---- Test.vue // -> runs here

Nuxt•16mo ago•

5 replies

Mediv0

Problem getting data from Pinia

<script lang="ts" setup>
const userStore = useUserStore();
const { status, refresh } = await useAsyncData(async () => {
    if (userStore.info)
        return true;

    await userStore.fetchUserInfo();
    return true;
});
</script>

<script lang="ts" setup>
const userStore = useUserStore();
const { status, refresh } = await useAsyncData(async () => {
    if (userStore.info)
        return true;

    await userStore.fetchUserInfo();
    return true;
});
</script>

test.vue

<script lang="ts" setup>
const store = useUserStore();
console.log(store.info); // null
</script>

<script lang="ts" setup>
const store = useUserStore();
console.log(store.info); // null
</script>

Problem getting data from Pinia

Similar Threads

Problem getting data from Pinia

Similar Threads

Similar Threads

Similar Threads