问题背景

在Nuxt3项目中使用Pinia进行状态管理时，页面刷新会导致状态数据丢失，这是SSR应用中常见的问题。

解决方案概览

方案一：使用VueUse的Storage相关Hook

配置步骤：

1. 安装依赖

bash

pnpm add @vueuse/nuxt @vueuse/core

1. 配置nuxt.config.ts

typescript

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

1. 在Store中使用

typescript

import { skipHydrate } from 'pinia'

export const useStateStore = defineStore('nuxtStore', () => {
  // 使用sessionStorage
  const state = useSessionStorage('nuxt-store-test', 0)
  // 或使用localStorage
  // const state = useLocalStorage('nuxt-store-test', 0)

  const setState = () => {
    state.value = state.value + 1
  }

  return {
    state: skipHydrate(state), // 关键：跳过hydration
    setState,
  }
})

注意事项：

• 必须使用skipHydrate：在SSR环境下，需要标记这些字段跳过hydration阶段

• 存储选择：

  • useSessionStorage：标签页级别持久化

  • useLocalStorage：浏览器级别持久化

  • useStorage：自动选择（默认localStorage）

方案二：使用Pinia持久化插件

配置步骤：

1. 安装依赖

bash

pnpm add @pinia-plugin-persistedstate/nuxt

1. 配置nuxt.config.ts

typescript

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

1. 在Store中启用持久化

typescript

export const usePluginStateStore = defineStore(
  'pluginStore', 
  () => {
    const pState = ref(0)
    const setPState = () => { pState.value += 1 }
    
    return { pState, setPState }
  }, 
  {
    persist: true, // 启用持久化
  }
)

高级配置：

typescript

{
  persist: {
    storage: 'localStorage',
    key: 'custom-key',
    paths: ['pState'], // 只持久化特定字段
  }
}

方案三：自定义Pinia插件

适用于需要特殊处理或使用其他插件的情况：

typescript

// plugins/pinia-plugin.ts
export default defineNuxtPlugin(({ $pinia }) => {
  $pinia.use(({ store }) => {
    // 从storage恢复数据
    const stored = sessionStorage.getItem(store.$id)
    if (stored) {
      store.$patch(JSON.parse(stored))
    }
    
    // 监听变化并保存
    store.$subscribe((mutation, state) => {
      sessionStorage.setItem(store.$id, JSON.stringify(state))
    })
  })
})

方案对比

方案	优点	缺点	适用场景
VueUse Storage	灵活，可精细控制每个字段	需要手动处理hydration	简单的状态持久化
Pinia插件	配置简单，功能完整	可能需要额外配置	完整的store持久化
自定义插件	完全自定义控制	需要自行实现	特殊需求场景

最佳实践建议

1. 按需持久化：只持久化必要的状态，避免存储过大

2. 敏感数据：不要在storage中存储敏感信息

3. 数据类型：注意storage只能存储字符串，复杂对象需要序列化

4. 错误处理：添加try-catch处理可能的storage操作错误

完整示例代码结构

text

composables/
├── stores/
│   ├── app.store.ts      // 使用VueUse的方案
│   └── user.store.ts     // 使用插件的方案
plugins/
├── pinia-persist.ts      // 自定义插件（可选）
nuxt.config.ts