Vue usevstorage (usevue)总是从干净开始，而不是在Pinia store中导入状态

Question

我在vitesse-nuxt3之上构建了我的应用程序，除了试图通过vueuse使用LocalStorage外，一切都很顺利。

组件:

<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商店:

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))

我看着它设置数据(在Chrome的开发工具中)，但它总是重新加载默认数据，而不是在刷新之间持续。

谢谢。

Answer 1

你的演示中的问题是组件是在服务器端呈现的，它没有本地存储，所以useStorage()默认为给定的初始值。

一种解决方法是仅在客户端呈现组件，使用<client-only>组件:

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

演示

Answer 2

for store like this @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]为默认值

after ssrpinia.state.value变成

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

在客户端重新设计json对象，以便像这样存储

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

因此accessToken,refreshToken属性更改为客户端计划对象，您可以更改它，但存储不更新。

我的解决方案:

添加一个操作来存储

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