Vue 2.9中Pinia状态页面刷新不持久的问题排查与解决

核心问题：重复创建Pinia实例导致插件未生效 #

你的main.ts中创建了两个独立的Pinia实例：

• 第一个createPinia()直接传给app.use()，但没有挂载持久化插件
• 第二个新建的pinia实例挂载了插件，却并未被应用实际使用

这就导致持久化插件根本没作用到运行的Pinia实例上，状态自然无法持久化。

修正后的main.ts代码 #

import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import router from './router' // 确保router已正确导入

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate);

const app = createApp(App);
app.use(pinia);
app.use(router);
app.mount("#app");

额外验证点 #

• 确认pinia-plugin-persistedstate版本适配Vue 2.x：该插件2.x版本仅支持Vue3，Vue2需安装1.x版本（执行npm install pinia-plugin-persistedstate@1）
• 检查浏览器控制台是否有报错，比如浏览器隐私设置禁止localStorage写入

替代持久化方案（手动实现） #

如果插件仍有问题，可以直接通过localStorage手动实现：

import { defineStore } from "pinia";

export const TokenStore = defineStore({
  id: "token",
  state: () => ({
    email:"",
    pseudo: "",
    myid: "",
    nom:"",
    prenom:"",
    role: "",
    token:"",
    avatar:"",
  }),
  actions: {
    // 更新状态时同步到localStorage
    updateState(newState) {
      Object.assign(this.$state, newState);
      localStorage.setItem('tokenStore', JSON.stringify(this.$state));
    },
    // 初始化时从localStorage读取状态
    loadSavedState() {
      const saved = localStorage.getItem('tokenStore');
      if (saved) {
        Object.assign(this.$state, JSON.parse(saved));
      }
    }
  }
});

在组件中使用时，挂载阶段加载保存的状态：

import { TokenStore } from '@/stores/token'

export default {
  mounted() {
    const tokenStore = TokenStore();
    tokenStore.loadSavedState();
  }
}

内容的提问来源于stack exchange，提问作者Amélie K.