vue3项目状态持久化方案Pinia

刷新后 username 消失是因为 Pinia 状态仅存于内存，页面刷新会重新初始化导致数据清空。 你的 Store 中虽然写了 localStorage.setItem 手动持久化，但初始化时并没有从 localStorage 读取恢复数据。

解决方案一：手动补全读取逻辑（无需安装插件）

直接修改 stores/user.ts，在初始化时从 localStorage 读取已保存的值：

javascript 复制代码

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useUserStore = defineStore('user', () => {
  // ✅ 初始化时从 localStorage 读取，没有则默认空字符串
  const username = ref(localStorage.getItem('username') || '')

  function setUsername(name: string) {
    username.value = name
    localStorage.setItem('username', name)
  }

  function clearUser() {
    username.value = ''
    localStorage.removeItem('username')
  }

  return { username, setUsername, clearUser }
})

改动只有一行：ref('') 改为 ref(localStorage.getItem('username') || '')。这样页面刷新重新初始化 Store 时，会自动从 localStorage 恢复之前保存的用户名。

解决方案二：使用持久化插件（推荐，更省心）

如果后续有更多状态需要持久化，推荐使用 pinia-plugin-persistedstate 插件，自动处理存取，无需手动写 localStorage 逻辑：

1. 安装插件

复制代码

npm install pinia-plugin-persistedstate

2. 在 main.ts 中注册插件

javascript 复制代码

import { createApp } from "vue";
import { createPinia } from "pinia";
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from "./App.vue";
import router from "./router/index.ts";

const app = createApp(App);
const pinia = createPinia();

pinia.use(piniaPluginPersistedstate);  // ✅ 注册持久化插件

app.use(pinia);
app.use(router);
app.mount("#app");

3. 在 Store 中开启持久化

javascript 复制代码

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useUserStore = defineStore('user', () => {
  const username = ref('')

  function setUsername(name: string) {
    username.value = name
  }

  function clearUser() {
    username.value = ''
  }

  return { username, setUsername, clearUser }
}, {
  persist: true  // ✅ 开启持久化，自动存入 localStorage
})

开启后，插件会自动在 username 变化时存入 localStorage，页面刷新时自动读取恢复，你不需要再手动写 localStorage.setItem 和 localStorage.getItem。

建议

当前只有 username 一个字段，用方案一 改一行代码最快；如果后续还有 token、权限等更多状态需要持久化，建议直接用方案二，一劳永逸。