Pinia 持久化插件常见问题及解决方案

Pinia 持久化插件常见问题及解决方案

问题概述

在使用 Pinia 状态管理时，持久化插件无法正常工作是常见问题。以下是三个主要原因及对应的解决方案。

1. 插件选择错误

问题：使用了错误的持久化插件 pinia-plugin-persist。

解决方案： 使用官方推荐的 @pinia-plugin-persistedstate 插件：

npm install @pinia-plugin-persistedstate

2. 缺少配置项

问题：安装了正确插件但未配置持久化。

解决方案：
在 store 中明确配置持久化：

javascript

import { defineStore } from 'pinia';

export const useUserInfoStore = defineStore('userInfo', {

state: () => ({
    username: '小明',
    age: 25,
    }),

    persist: true,

});

3. 重复创建Pinia实例

问题：在项目中创建了多个pinia实例

解决方案：
保留其中一个

//    /store/index.js

import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

const pinia = createPinia();

pinia.use(piniaPluginPersistedstate);

export default pinia;   //导出Pinia


//    mian.js
import { createApp } from 'vue'
import pinia from '@/stores/index'

import App from './App.vue'

const app = createApp(App)

app.use(pinia)

app.mount('#app')