v0.17.5 breaks initialState with useStorage and pinia

I use a pinia store combined with useStorage:

import { defineStore } from 'pinia';
import { useStorage } from '@vueuse/core';

const useTestStore = defineStore({
  id: 'test',
  state: () => ({
    test: useStorage('test', true),
  }),
})

I use the following code to set the initialState of pinia in the main.ts:

// main.ts
export const createApp = ViteSSG(
  App,
  { routes },
  ({ app, router, routes, isClient, initialState }) => {
    // ...
    const pinia = createPinia();
    app.use(pinia);

    if (isClient) {
      pinia.state.value = initialState.pinia || {};
    } else {
      initialState.pinia = pinia.state.value;
    }
  }
)

This works well with vite-ssg until v0.17.4. With v0.17.5 the pinia store is not initialized correctly anymore. It looses the Ref-values from useStorage. In result the store property ‘test’ is not reactively persisted in the localStorage anymore.

I looked into the commit https://github.com/antfu/vite-ssg/commit/77597f5 and I saw that the initialState put into ViteSSGContext is not transformed or serialized anymore. Do I need to do it manually now? Or is there another way to combine vite-ssg with pinia and useStorage? In dev mode it still works even with v0.17.5.

[cimchd]

Thanks a lot for your clarification and your help. I wasn’t aware that I was benefiting from a mistake. I think I will just remove the serialization for the moment in my project until I really need it.

I tested a little bit, and it seems, that

// main.ts
// ...
if (isClient) {
  pinia.state.value = initialState.pinia || {};
  pinia.state.value.test.test = useStorage('test', pinia.state.value.test.test))
} else {
  initialState.pinia = pinia.state.value;
}

would work to keep the ref from useStorage with serialization.

[gryphonmyers]

@gryphonmyers sure: https://github.com/cimchd/vite-ssg-pinia-localstorage

The steps to reproduce the error are described in the README.md

Ok so with the previous version of vite-ssg, this application actually never serializes the store state. You’re suffering from the fact that with the new version, the data from the store (e.g. “test: true”) is getting serialized into the HTML and thus deserialized and set to the pinia store in the client here: https://github.com/cimchd/vite-ssg-pinia-localstorage/blob/main/src/main.ts#L20

You can verify this by building the application with 0.17.4, note that index.html contains: window.__INITIAL_STATE__="{\"pinia\":{}}"

Now build it with 0.17.5 and you’ll instead see: window.__INITIAL_STATE__="{\"pinia\":{\"test\":{\"test\":true}}}"

This means that for the first time, when we set the initial state to pinia (happening here https://github.com/cimchd/vite-ssg-pinia-localstorage/blob/main/src/main.ts#L20), we are actually setting values. This prevents the useStorage function from ever running since it’s happening inside the state initializer (pinia is not initializing this state because it now already has the values we gave it from the deserialized initial state) (https://github.com/cimchd/vite-ssg-pinia-localstorage/blob/main/src/stores/test.ts#L8).

To me it’s pretty clear this is not a bug with vite-ssg or the recent feature addition, but a side effect of the fact that before, serialization of state happened much earlier and your application state was being missed. Now it is actually picking up state that is set over the course of your application’s initialization / render, where before it was not. This was the intended purpose of the recent feature - to allow more time for applications to accumulate state so that we can serialize / deserialize it. If your application does not function correctly while using the deserialized state, I’d suggest simply not using it. Or perhaps rethink the way you integrate the store with useStorage