在 Vue 3 项目中，Pinia 是官方推荐的状态管理库，而 Pinia Persisted State 插件可以帮助我们将 Pinia 的状态持久化到浏览器的存储中（例如 localStorage 或 sessionStorage），这样即使页面刷新后，状态仍然能够保持。
以下是详细的教程，涵盖了从安装插件、在 Pinia 中使用插件、配置持久化策略、验证是否成功等内容。
1. 安装 Pinia 和 Pinia Persist 插件
首先，我们需要安装 pinia 和 pinia-plugin-persistedstate 插件。
安装依赖：
npm install pinia pinia-plugin-persistedstate
2. 在 Pinia 中使用 Persist 插件
接下来，我们需要在 Pinia 中启用 Persist 插件。
在 store.js 中设置 Pinia 和 Persist 插件：
// stores/index.js
import { createPinia } from 'pinia';
import piniaPersist from 'pinia-plugin-persistedstate'; // 引入持久化插件const pinia = createPinia();// 启用 Pinia Persist 插件
pinia.use(piniaPersist);export default pinia;
在 main.js 中，确保 Pinia 被正确注册到 Vue 应用中：
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import pinia from './stores';const app = createApp(App);
app.use(pinia); // 注册 Pinia
app.mount('#app');
3. 定义 Pinia Store 并指定持久化配置
在实际项目中，我们通常会在 store 中定义一些状态（如用户信息、主题设置等）。如果想让某个状态在浏览器中持久化存储，可以在状态定义时，使用 persist 配置。
示例：定义一个持久化状态的 Store
// stores/user.js
import { defineStore } from 'pinia';export const useUserStore = defineStore('user', {state: () => ({username: '',theme: 'light',}),persist: {enabled: true, // 启用持久化strategies: [{storage: localStorage, // 使用 localStorage 来持久化paths: ['username'], // 只有 username 会被持久化，theme 不会},],},
});
在这个示例中，我们定义了一个 user store，其中有 username 和 theme 两个状态。通过设置 persist 配置：
- enabled: true：启用持久化。
- storage: localStorage：表示状态数据将被存储在
localStorage中。你也可以使用sessionStorage，这样数据将在浏览器会话结束时丢失。 - paths: [‘username’]：只有
username状态会被持久化，theme将不会被存储。
4. 在组件中使用 Store
在 Vue 组件中，我们可以通过 useUserStore 来访问和更新状态。
<template><div><h1>User: {{ username }}</h1><button @click="changeUsername">Change Username</button></div>
</template><script>
import { useUserStore } from '@/stores/user'; // 引入 storeexport default {setup() {const userStore = useUserStore();const changeUsername = () => {userStore.username = 'John Doe'; // 更新 username};return {username: userStore.username,changeUsername,};},
};
</script>
在上面的代码中，username 是从 Pinia Store 中获取的，用户点击按钮后，username 会更新，并且如果持久化设置生效，页面刷新后 username 的值将会保留。
5. 验证插件是否成功工作
为了验证 Pinia Persist 插件是否有效，我们可以按照以下步骤进行验证：
1. 刷新页面。
- 在浏览器的 开发者工具 中打开
localStorage（或sessionStorage），查看是否存储了username。 - 如果存在存储的
username数据，说明插件已经成功工作。
2. 观察数据是否持久化：
- 如果你在页面中更新了
username，刷新页面后，检查localStorage中的值是否仍然存在，并且页面中的username是否保持更新。
验证步骤：
- 打开开发者工具 (
F12或Ctrl + Shift + I)。 - 转到 应用程序 (Application) 标签页。
- 在 LocalStorage 下找到你的域名，检查是否有
username数据。
如果数据如预期般持久化，说明插件已经成功生效。
6. 配置持久化策略
pinia-plugin-persistedstate 插件允许对持久化策略进行更多的配置。例如，您可以控制存储的键名、存储的位置，或者指定哪些路径应该被持久化。
常见的配置选项：
- storage: 可以选择
localStorage或sessionStorage，或者自定义存储对象。 - paths: 定义哪些 state 应该被持久化，默认情况下会持久化所有 state。
- key: 定义存储在
localStorage或sessionStorage中的键名。 - rehydrate: 是否在初始化时重新加载持久化的状态。
示例：复杂的持久化配置
// stores/user.js
import { defineStore } from 'pinia';export const useUserStore = defineStore('user', {state: () => ({username: '',theme: 'light',lastLogin: null,}),persist: {enabled: true, // 启用持久化strategies: [{storage: localStorage, // 使用 localStoragepaths: ['username', 'lastLogin'], // 持久化 username 和 lastLoginkey: 'user_data', // 定义 localStorage 键名为 'user_data'},{storage: sessionStorage, // 使用 sessionStoragepaths: ['theme'], // 持久化 themekey: 'user_theme', // 定义 sessionStorage 键名为 'user_theme'},],},
});
在这个例子中，我们使用了两个不同的持久化策略：
username和lastLogin会被存储在localStorage中，键名为'user_data'。theme会被存储在sessionStorage中，键名为'user_theme'。
7. 总结
通过 pinia-plugin-persistedstate 插件，您可以非常方便地将 Pinia 中的状态持久化到浏览器存储中。插件支持多种配置选项，可以选择存储方式（localStorage、sessionStorage）以及要持久化的状态。
- 安装插件并在 Pinia 中启用它。
- 在 Store 中通过
persist配置来指定哪些状态需要持久化。 - 可以通过
localStorage或sessionStorage来存储状态数据，甚至可以为每个状态指定不同的存储方案。
这种方式可以极大地提升用户体验，尤其是在需要保存用户设置、登录状态等信息时。