Vue useStorage (usevue) always starting clean rather than importing state in Pinia store - vue.js

Question

I built my app on top of vitesse-nuxt3, and all is going well except for trying to use LocalStorage via vueuse.
Component:
<script setup lang="ts">
const { test } = useTestStore()
</script>
<template>
<div>
<pre>{{ test }}</pre>
<hr>
<input
:id="slug"
v-model="value"
type="text"
>
</div>
</template>
Pinia Store:
import { acceptHMRUpdate, defineStore } from 'pinia'
import { useStorage } from '#vueuse/core'
export const useTestStore = defineStore('test', () => {
const test = ref(
useStorage('test', {
initials: 'It is initials',
}),
)
return ({
test,
})
})
if (import.meta.hot)
import.meta.hot.accept(acceptHMRUpdate(useTestStore, import.meta.hot))
I watch it set the data (in Chrome's dev tools), but it always reloads the default data instead rather than persisting between refreshes.
Thank you.

Answer 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

Answer 2

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) {
//...
}
}