Nuxt•4d ago

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

5 Replies

Luke•4d ago

Check out the storeToRefs composable. https://pinia.vuejs.org/core-concepts/#Destructuring-from-a-Store

Pinia 🍍

Intuitive, type safe, light and flexible Store for Vue

Luke•4d ago

const {info} = storetoRefs(useUserStore());

const {info} = storetoRefs(useUserStore());

info will be a ref so will update once the data is populated.

Mediv0•2d ago

i'll check it out thanks

Krd8ssb•2d ago

@Mediv0 did you get it working? I'm having a similar issue, I think

Mediv0•2d ago

Not yet I just moved the shared logic to my main layout

Gaming

Programming

Problem getting data from Pinia