Vue 教程：Pinia 状态持久化实战——结合 localStorage 与插件机制

快速概述

Pinia 是 Vue 官方推荐的状态管理库，但在页面刷新后状态会丢失。本教程将介绍如何通过 localStorage 与插件机制实现 Pinia 状态的持久化，适用于需要保存用户偏好、购物车等数据的场景。前置环境要求：熟悉 Vue 3 与 Pinia 基础，已安装 Node.js（^20.19.0 || >=22.12.0）。

核心概念与原理

Pinia 插件机制允许在 store 创建时注入自定义逻辑。持久化插件的核心原理是：在 store 初始化时从 localStorage 读取数据并合并到 state，同时通过 $subscribe 监听状态变化并写入 localStorage。这种模式避免了在每个 store 中手动编写持久化代码，提高了复用性。

实战步骤与代码

1. 创建 Vue 项目并安装 Pinia：使用 npm create vue@latest 创建项目，并在提示中选择 Pinia 选项。
2. 定义 store：在 stores/counter.js 中定义 counter store。
3. 编写持久化插件：创建 plugins/persist.js，实现基于 localStorage 的持久化逻辑。
4. 注册插件：在 main.js 中通过 pinia.use(persistPlugin) 注册插件。

// stores/counter.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, name: 'Vue' }) }); 

// plugins/persist.js import { watch } from 'vue';

export function persistPlugin({ store }) { // 从 localStorage 读取初始数据 const saved = localStorage.getItem(store.$id); if (saved) { store.$patch(JSON.parse(saved)); } // 监听状态变化并保存 watch(() => store.$state, (state) => { localStorage.setItem(store.$id, JSON.stringify(state)); }, { deep: true }); } 

// main.js import { createApp } from 'vue'; import { createPinia } from 'pinia'; import App from './App.vue'; import { persistPlugin } from './plugins/persist';

const pinia = createPinia(); pinia.use(persistPlugin);
createApp(App).use(pinia).mount('#app'); 

常见坑点与优化

• JSON 解析错误：localStorage 中数据损坏时，应使用 try-catch 包裹解析逻辑，避免应用崩溃。
• 性能问题：深度监听 state 可能导致频繁写入，建议使用防抖或节流，或仅持久化必要字段。
• 多标签页同步：如需跨标签页同步，可监听 storage 事件，但需注意避免循环写入。

通过以上步骤，你可以轻松实现 Pinia 状态的持久化，提升应用体验与数据可靠性。