Closed ehsanonline closed 3 months ago
.
src/store.ts
import { defineStore } from 'pinia' export const myStore = defineStore('mystore', () => { let data = ref<any>(123) onServerPrefetch(() => { data.value = 456 }) return { data } })
components/comp.vue
<script setup lang="ts"> import { myStore } from '~/stores/store' const store = myStore() const { data } = storeToRefs(store) </script> <template> {{ data }}<br> </template>
app.vue
store.ts
<template> <div> <Comp></Comp> <Comp></Comp> </div> </template>
npm run dev
output on initial load from ssr: 456 456
page ssr output: 456 123
page output after one second: 456 456
first component works fine with ssr, but second one is not. page source code for second component is 123 which is bad for ssr.
instead of onServerPrefetch ,i tried watch with immidiate:true and useFetch too. same behavier.
onServerPrefetch
watch
immidiate:true
useFetch
"dependencies": { "@pinia/nuxt": "^0.5.1", "nuxt": "^3.12.1", "pinia": "^2.1.7", "vue": "^3.4.27", "vue-router": "^4.3.3" }
Reproduction
.
Steps to reproduce the bug
src/store.ts
components/comp.vue
app.vue
and place multiple of that component (or any component that consumesstore.ts
)npm run dev
Expected behavior
output on initial load from ssr: 456 456
Actual behavior
page ssr output: 456 123
page output after one second: 456 456
first component works fine with ssr, but second one is not. page source code for second component is 123 which is bad for ssr.
Additional information
instead of
onServerPrefetch
,i triedwatch
withimmidiate:true
anduseFetch
too. same behavier.