Nuxt•2w ago

What is the best way to use pinia with useAsyncData

I have a very simple component like this:

<script setup lang="ts">
const { fetchNotifications, notifications } = useNotificationsStore();
const { status, refresh } = await useLazyAsyncData(async () => fetchNotifications("DEFAULT").then(() => true));
</script>

<template>
    <p v-if="status === 'success'">
        <span v-for="(notif, i) in notifications" :key="i">
            {{ notif.context }}
        </span>
    </p>
</template>

<script setup lang="ts">
const { fetchNotifications, notifications } = useNotificationsStore();
const { status, refresh } = await useLazyAsyncData(async () => fetchNotifications("DEFAULT").then(() => true));
</script>

<template>
    <p v-if="status === 'success'">
        <span v-for="(notif, i) in notifications" :key="i">
            {{ notif.context }}
        </span>
    </p>
</template>

but it always causes Hydration completed but contains mismatches. what is the best way to get this data

4 Replies

KirbyTwister•2w ago

Can you show the code in useNotificationsStore?

Mediv0•2w ago

sure

export const useNotificationsStore = defineStore({
    id: "NotificationsStore",
    state: () => ({
        notifications: [] as NotificationType[],
    }),
    actions: {
        async fetchNotifications(category: string, options: { skip: number; limit: number }) {
            try {
                const res = await useCustomFetch(`...API URL`, { API_URL: "notification" });
                this.notifications = res.data;
            }
            catch (e: any) {
                throw new Error(e.message);
            }
        },
    },

    getters: {
        hasUnreadNotifications(state) {
            return state.notifications.some(notification => !notification.is_read);
        },
    },
});

export const useNotificationsStore = defineStore({
    id: "NotificationsStore",
    state: () => ({
        notifications: [] as NotificationType[],
    }),
    actions: {
        async fetchNotifications(category: string, options: { skip: number; limit: number }) {
            try {
                const res = await useCustomFetch(`...API URL`, { API_URL: "notification" });
                this.notifications = res.data;
            }
            catch (e: any) {
                throw new Error(e.message);
            }
        },
    },

    getters: {
        hasUnreadNotifications(state) {
            return state.notifications.some(notification => !notification.is_read);
        },
    },
});

KirbyTwister•2w ago

My suggestion would be to try rewrite it as a setup store (https://pinia.vuejs.org/core-concepts/#Setup-Stores), but utilize useState instead of ref

Pinia 🍍

Intuitive, type safe, light and flexible Store for Vue

Mediv0•2w ago

nice i'll check it out thank you

Gaming

Programming

What is the best way to use pinia with useAsyncData