vuejs / pinia

🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support
https://pinia.vuejs.org
MIT License
13.02k stars 1.04k forks source link

SSR does not works on pinia with Nuxt on repeated component #2691

Closed ehsanonline closed 3 months ago

ehsanonline commented 3 months ago

Reproduction

.

Steps to reproduce the bug

  1. make a simple store with pinia: src/store.ts
    import { defineStore } from 'pinia'
    export const myStore = defineStore('mystore', () => {
    let data = ref<any>(123)
    onServerPrefetch(() => {
        data.value = 456
    })
    return { data }
    })
  2. make a consumer vue component: components/comp.vue
    <script setup lang="ts">
    import { myStore } from '~/stores/store'
    const store = myStore()
    const { data } = storeToRefs(store)
    </script>
    <template>
    {{ data }}<br>
    </template>
  3. edit app.vue and place multiple of that component (or any component that consumes store.ts)
    <template>
    <div>
    <Comp></Comp>
    <Comp></Comp>
    </div>
    </template>
  4. run 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 tried watch with immidiate:true and useFetch too. same behavier.

 "dependencies": {
    "@pinia/nuxt": "^0.5.1",
    "nuxt": "^3.12.1",
    "pinia": "^2.1.7",
    "vue": "^3.4.27",
    "vue-router": "^4.3.3"
  }