[Vuejs]-Vue useStorage (usevue) always starting clean rather than importing state in Pinia store

by

1👍

✅

The problem in your demo is that the component is being rendered server-side, which has no Local Storage, so useStorage() defaults to the given initial value.

One workaround is to render the component on the client only, using the <client-only> component:

<client-only>
  <component-that-uses-local-storage />
</client-only>

demo

👤tony19

0👍

for store like this like @tony19 said

export const useAuthStore = defineStore({
    id: 'auth.store',
    state: () => {
        token: {
            accessToken: useStorage('accessToken', [XXXX], undefined, { serializer: StorageSerializers.object }),
            refreshToken: useStorage('refreshToken', [YYYY], undefined, { serializer: StorageSerializers.object })
        },
    },
})

[XXXX] [YYYY] is default value

after ssr pinia.state.value become to

window.__INITIAL_SSR_CONTEXT__ = {
    state: {
        "auth.store": {
            "token":{
                "accessToken":[XXXX],
                "refreshToken":[YYYY]
            }
        }
    }
}

on client side reasign the json object to store like this

const ssr_state = (window as any)['__INITIAL_SSR_CONTEXT__']?.['state']
if (ssr_state) {
    pinia.state.value = ssr_state
}

so the accessToken, refreshToken property changes to plan object on client side, you can change it but the storage don’t update.

my solution:

add one action to store

actions:{
    // ...
    // call this once when isSSR is true on client side entry
    reasignToken() {
      this.token = {
        accessToken: useStorage('accessToken', this.token.accessToken, undefined, {
          serializer: StorageSerializers.object
        }),
        refreshToken: useStorage('refreshToken', this.token.refreshToken, undefined, {
          serializer: StorageSerializers.object
        })
      }
    },
    // regular call on server side and client side
    setToken(token) {
        //... 
    }
}
👤Garry

Leave a comment