Nuxt3页面刷新后如何保留状态数据？

针对你遇到的页面刷新状态丢失问题，以下是几种可靠的实现方式：

一、使用Pinia持久化插件（推荐方案） #

如果你的项目用Pinia做状态管理，官方的持久化插件能自动帮你同步状态到localStorage/sessionStorage，无需手动处理：

1. 安装插件

npm install @pinia-plugin-persistedstate/nuxt

2. 在nuxt.config.ts中配置插件

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt'
  ]
})

3. 在你的Pinia Store中开启持久化

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    userInfo: {}
  }),
  // 开启持久化，默认存到localStorage
  persist: true,
  // 也可以自定义配置，比如存到sessionStorage、指定字段
  // persist: {
  //   storage: sessionStorage,
  //   paths: ['token'] // 只持久化token字段
  // }
})

二、手动实现localStorage同步（无需插件） #

如果你不想用插件，可以手动在状态初始化时读取存储，同时监听状态变化写入：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: localStorage.getItem('userToken') || '',
    userInfo: JSON.parse(localStorage.getItem('userInfo') || '{}')
  }),
  actions: {
    setToken(token: string) {
      this.token = token
      localStorage.setItem('userToken', token)
    },
    setUserInfo(info: object) {
      this.userInfo = info
      localStorage.setItem('userInfo', JSON.stringify(info))
    }
  }
})

或者用watch监听整个state变化：

import { defineStore, watch } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    userInfo: {}
  }),
  // 初始化时读取存储
  onMounted() {
    this.token = localStorage.getItem('userToken') || ''
    this.userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
  }
})

// 在组件或store外部监听状态变化
const store = useUserStore()
watch(store, (state) => {
  localStorage.setItem('userToken', state.token)
  localStorage.setItem('userInfo', JSON.stringify(state.userInfo))
}, { deep: true })

三、使用Nuxt的useCookie（适配SSR场景） #

如果你的项目需要服务端渲染，localStorage在服务端无法访问，这时可以用useCookie来存储状态：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: useCookie('userToken').value || ''
  }),
  actions: {
    setToken(token: string) {
      this.token = token
      useCookie('userToken').value = token
    }
  }
})

cookie会在客户端和服务端之间同步，刷新页面后状态不会丢失，还能支持SSR渲染时获取状态。

注意事项 #

• 如果你之前用localStorage没生效，大概率是没有在页面初始化时从存储中读取数据，或者状态更新时没有同步写入存储。
• 存储敏感数据时，建议用sessionStorage（关闭浏览器就清除）或加密后的cookie，避免安全风险。

内容的提问来源于stack exchange，提问作者Hedwig John