Vue useStorage (usevue) 总是开始清理而不是在 Pinia 商店中导入状态答案

【问题标题】：Vue useStorage (usevue) always starting clean rather than importing state in Pinia storeVue useStorage (usevue) 总是开始清理而不是在 Pinia 商店中导入状态
【发布时间】：2022-08-17 02:06:01
【问题描述】：

我在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>

松树专卖店：

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 的开发工具中），但它总是重新加载默认数据，而不是在刷新之间保持不变。

谢谢你。

useStorage 在此 example 中正确保存数据。你能分享一个重现问题的链接吗？
干杯。 stackblitz.com/edit/github-mgbef6-gfkpou

标签： vue.js local-storage vuejs3 pinia vueuse

【解决方案1】：

您的demo 中的问题是组件正在服务器端呈现，它没有本地存储，所以useStorage() defaults to the given initial value。

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

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

demo

【讨论】：

太感谢了！这完美地解决了我的问题。真的很感谢你的时间。

【解决方案2】：

对于像@tony19 这样的商店说

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

【讨论】：