Vue useStorage (usevue)总是在皮尼亚商店开始清洁而不是进口状态。
Vue useStorage (usevue)总是在皮尼亚商店开始清洁而不是进口状态。
提问于 2022-06-27 09:14:55
我在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的dev工具中)，但是它总是重新加载默认数据，而不是在刷新之间持续。
谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-07-03 19:06:27
演示中的问题是组件被呈现在服务器端，服务器端没有本地存储，所以默认值为给定的初始值。。
一个解决方法是使用组件在客户端上呈现组件。
<client-only>
<component-that-uses-local-storage />
</client-only>Stack Overflow用户
发布于 2022-08-16 18:06:01
像这样的商店，@tony19 19说
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]是默认值。
在ssr pinia.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) {
//...
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72769642
复制相关文章
相似问题
腾讯云开发者
