Add initialState example with a store (vuex/pinia)

[m4rvr]

Hey!

The docs describe the use of Vuex for the initial state but I'm not 100% sure how I need to use that in a component. For me, it sounds like that I either need to use app.provide (& inject in components) or a store like Vuex. Is this correct?

Currently my code sets the state of the store to the value of the initialStore parameter. The value is available in my components, but only on the client-side (I think?), because it shows the title and instantly deletes it. Do I still need to set the initial state to that value in the component like it's in the Homepage.vue example when I use a store?

This is my setup() code of my component:

const store = useStore()
const title = ref(store.title || null)

if (!title.value) {
  onServerPrefetch(() => {
    title.value = 'Fetched title'
    store.$patch({
      title: title.value
    })
  })
}

The same code works when I inject the initialState and set it like initialState.title = title.value.

EDIT: For reference there is actually this documentation (https://pinia.esm.dev/ssr/#state-hydration) for pinia in their docs which works perfectly.

[Lord-Y]

@MarvinRudolph Did you figure out how to make it work? I'm having the same issue

[m4rvr]

@MarvinRudolph Did you figure out how to make it work? I'm having the same issue

With pinia, yes. See the link above. But not with Vuex because I don't use it.

[frandiox]

The example with Pinia is already in the readme. I think that should be enough for now 🙃