Nuxt•13mo ago

Value in composable is empty

I have this line of code that stores the user info

/composables/auth.ts
const user = ref<Form | null>(null);

const getCurrentUser = async (): Promise<void> => {
        try {
            const data = await $fetch("/api/auth/user", {
                method: "GET",
                headers: sessionHeader,
            });
            
            if (data.body && "user" in data.body) {
                user.value = data.body.user;
            }
        } catch (err) {
            console.log(err);
        }
    };

/composables/auth.ts
const user = ref<Form | null>(null);

const getCurrentUser = async (): Promise<void> => {
        try {
            const data = await $fetch("/api/auth/user", {
                method: "GET",
                headers: sessionHeader,
            });
            
            if (data.body && "user" in data.body) {
                user.value = data.body.user;
            }
        } catch (err) {
            console.log(err);
        }
    };

/composables/auth.ts
const user = ref<Form | null>(null);

const getCurrentUser = async (): Promise<void> => {
        try {
            const data = await $fetch("/api/auth/user", {
                method: "GET",
                headers: sessionHeader,
            });
            
            if (data.body && "user" in data.body) {
                user.value = data.body.user;
            }
        } catch (err) {
            console.log(err);
        }
    };

/composables/auth.ts
const user = ref<Form | null>(null);

const getCurrentUser = async (): Promise<void> => {
        try {
            const data = await $fetch("/api/auth/user", {
                method: "GET",
                headers: sessionHeader,
            });
            
            if (data.body && "user" in data.body) {
                user.value = data.body.user;
            }
        } catch (err) {
            console.log(err);
        }
    };

The code above is being called on

/layouts/dashboard.vue

/layouts/dashboard.vue

/layouts/dashboard.vue

/layouts/dashboard.vue That display's the name of the user

<template>
<DashboardHeader :user="user" />
(....)
const { user, getCurrentUser } = useAuth();
getCurrentUser();

<template>
<DashboardHeader :user="user" />
(....)
const { user, getCurrentUser } = useAuth();
getCurrentUser();

<template>
<DashboardHeader :user="user" />
(....)
const { user, getCurrentUser } = useAuth();
getCurrentUser();

<template>
<DashboardHeader :user="user" />
(....)
const { user, getCurrentUser } = useAuth();
getCurrentUser();

I have this component located at

/components/dashboard/CurriculumVit.vue

/components/dashboard/CurriculumVit.vue

/components/dashboard/CurriculumVit.vue

/components/dashboard/CurriculumVit.vue but on the page it displays nothing.

<template>
{{ useAuth().user }}
</template>

<template>
{{ useAuth().user }}
</template>

<template>
{{ useAuth().user }}
</template>

<template>
{{ useAuth().user }}
</template>

What is the cause of

{{ useAuth().user }}

{{ useAuth().user }}

{{ useAuth().user }}

{{ useAuth().user }} having no value when it was able to display the name of the user ?
Does

useState

useState

useState

useState solve this issue?

kapa.ai•12/16/24, 2:13 PM

Hi @o.m. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•12/16/24, 2:14 PM

----------------------
Based on the information provided in your question and the knowledge sources available, it seems that you're encountering an issue with state management in your Nuxt application. Let's address your questions and provide some insights:

The cause of `{{ useAuth().user }}` having no value:The issue likely stems from how composables work in Vue and Nuxt. When you call `useAuth()` in different components, you're creating separate instances of the composable, each with its own state. This means that changes to the `user` ref in one component won't affect the same ref in another component.
Using `useState` to solve this issue:Yes, `useState` can help solve this issue. According to the **Nuxt documentation on State Management** (<https://nuxt.com/docs/getting-started/state-management>), `useState` is designed to create a reactive and SSR-friendly shared state across components.

Here's how you can modify your code to use

useState

useState

In your composable (/composables/auth.ts/composables/auth.ts), replace refref with
```
useState
```
```
useState
```
:

const user = useState('user', () => null);

const getCurrentUser = async (): Promise<void> => {
    try {
        const data = await $fetch("/api/auth/user", {
            method: "GET",
            headers: sessionHeader,
        });
        
        if (data.body && "user" in data.body) {
            user.value = data.body.user;
        }
    } catch (err) {
        console.log(err);
    }
};

const user = useState('user', () => null);

const getCurrentUser = async (): Promise<void> => {
    try {
        const data = await $fetch("/api/auth/user", {
            method: "GET",
            headers: sessionHeader,
        });
        
        if (data.body && "user" in data.body) {
            user.value = data.body.user;
        }
    } catch (err) {
        console.log(err);
    }
};

In your components, you can now use useAuth().useruseAuth().user and it will reflect the shared state:

<template>
  {{ useAuth().user }}
</template>

<template>
  {{ useAuth().user }}
</template>

This approach ensures that the useruser state is shared across all components that use the useAuthuseAuth composable.

kapa.ai•12/16/24, 2:14 PM

It's important to note that, as mentioned in the Nuxt documentation (https://nuxt.com/docs/getting-started/state-management#best-practices), you should never define state outside of <script setup><script setup> or setup()setup() function to avoid state being shared across requests on the server, which can lead to memory leaks.

Also, be aware that the data inside

useState

useState

will be serialized to JSON, so it's important that it doesn't contain anything that cannot be serialized, such as classes, functions, or symbols.

By using

useState

useState

, you should be able to solve the issue of the user information not being available in your CurriculumVit.vueCurriculumVit.vue component while still being displayed in the DashboardHeaderDashboardHeader component.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•12/16/24, 2:14 PM

@674984670156423171 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Value in composable is empty

Similar Threads

Similar Threads

Similar Threads