Nuxt•5mo ago

Pinia and Nuxt Layouts

Hey! Quick question about Pinia. I have a very simple user store with a state and a "fetch" action that populates this state via a GQL request. I trigger this fetch in the top-level component app.vue:

const userStore = useUserStore();
userStore.fetch();

const userStore = useUserStore();
userStore.fetch();

But when I want to access the state in my default layout to display the user's photo like this:

const userStore = useUserStore();
console.log(userStore.photo);

const userStore = useUserStore();
console.log(userStore.photo);

Well, the console.log is empty... Yet everything is well initialized if I inspect with NuxtDevTools. What is the issue with layouts ? Because i'm using the state of this very same store in a page and display them without any issue ... Any idea?

3 Replies

dwol•5mo ago

What happens if you use userStore.photo in the template

MolakDulOP•5mo ago

It's working well, but if I simulate a 3G internet connection, you can see there is the placeholder in the first place and then the photo replacing it.

Danny Vogel•5mo ago

I think the issue is merely that the console log happens before the state is populated. Try going to your layout and put

 {{ userStore.photo }}

 {{ userStore.photo }}

in the template section to see if it updates automatically. Or use a watch in your script setup

Gaming

Programming

Pinia and Nuxt Layouts