Wait until store is ready

[sergi0g]

Hello,
I am creating a website with Nuxt and have decided to use Pinia as a store. When creating a store object, the store has it's initial state. For example, I might have a store with the default state {authenticated:false}. When I want to check if the user is authenticated in a page, the code will look like this:

<template>
    <!-- content here -->
</template>
<script setup>
import { useLoginStore } from '@/stores/login';

const loginStore = useLoginStore();

if (loginStore.value === true) {
  // run some code
} else {
  // redirect to login page
}
</script>

The problem here is that the code runs before the store has loaded the data, which means that the user will always be redirected to the login page.

Is there some way I can find out if the store has loaded, or I am still using the initial state?

[posva]

You don't need to wait for the store to be loaded, you need to wait for the authentication to load the current user: if (await getCurrentUser())

[sergi0g]

Can you please provide an example store and an example sfc using it? For example, using the username stored to make an api request when the page loads.

[posva]

I can’t because this is independent of stores 😄
It depends on your authentication solely

[sergi0g]

I currently have a login page which POSTS the data to the server and if the server authenticates the user, I set the username in the store. I want to be able to use it in subsequent API requests. If I make a user profile page, I will have to load the data from the server. That requires having the username, which I won't have until the store is ready. That's basically my problem.

[posva]

Then await the function that makes the post request for the login. If it’s an action, await the action