finding home
finding home
PostsComments
NNuxt
Created by finding home on 6/18/2024 in #❓・help
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>
2 replies