Nuxt•7mo ago

two pages use pinia, have Hydration node mismatch warning

Here's how you could express your question in English to a native speaker: I have two pages that use Pinai in almost the same way, but one of the pages keeps giving me a "Hydration node mismatch" error. Why is this happening?

export const useBucketListStore = defineStore('useBucketList', () => {
    const {
        data,
        pending,
        refresh,
        clear,
        error,
        execute
    } = useFetch('/api/cdn/bucket-list');

    const bucketList = computed(() => {
        //@ts-ignore
        return data.value?.Buckets || []
    })

    return {
        data,
        pending,
        refresh,
        clear,
        error,
        execute,
        bucketList
    }
})

export const useBucketListStore = defineStore('useBucketList', () => {
    const {
        data,
        pending,
        refresh,
        clear,
        error,
        execute
    } = useFetch('/api/cdn/bucket-list');

    const bucketList = computed(() => {
        //@ts-ignore
        return data.value?.Buckets || []
    })

    return {
        data,
        pending,
        refresh,
        clear,
        error,
        execute,
        bucketList
    }
})

const bucketListStore = useBucketListStore();
const {bucketList, pending} = storeToRefs(bucketListStore);

        <div>
            {{ pending }}
        </div>
        <div v-if="pending">
            loading
        </div>
        <template v-else>
            <div v-for="item in bucketList" :key="item.Name">
                {{ item }}
            </div>
        </template>

const bucketListStore = useBucketListStore();
const {bucketList, pending} = storeToRefs(bucketListStore);

        <div>
            {{ pending }}
        </div>
        <div v-if="pending">
            loading
        </div>
        <template v-else>
            <div v-for="item in bucketList" :key="item.Name">
                {{ item }}
            </div>
        </template>

1 Reply

handshake•7mo ago

is the hydration an ssr issue? if so, you might need to use a conditional to know whatever you're expecting is finalized. Is this the final error, or is there more to the message?

Gaming

Programming

two pages use pinia, have Hydration node mismatch warning