在 Nuxt v3 中重新加载之间保持状态

Question

有人知道在 Nuxt v3 中重新加载之间保持状态的最佳方法是什么吗？

我有我的可组合文件 states.ts：

导出 const useUser = () => useState('user',retrieveUser)

const retrieveUser = () => {
    if (process.server) return null
    const user = localStorage.getItem('user')
    if (user) {
        try {
            const parsedUser: User = JSON.parse(user)
            if (new Date(parsedUser.expires) < new Date()) {
                localStorage.removeItem('user')
                return null
            }
            return parsedUser
        } catch (error) {
            return null
        } 
    }
    return null
}

export type User = {
    email: string
    username: string
    name: string
    zipCode: string
    profilePicture: string
    expires: Date
}

然而，这并不能解决问题。有什么想法吗？

Answer 1

想通了。在 app.vue 中使用 onBeforeMount 钩子。

onBeforeMount(() => {
  const user = useUser();
  if (!user || !user.value) {
    const foundUser = localStorage.getItem('user');
    if (foundUser) {
      user.value = JSON.parse(foundUser);
    }
  }
})