一、重温Pinia
Pinia是Vue.js的轻量级状态管理库，旨在替代Vuex，提供更简洁的API和更好的TypeScript支持。 它采用扁平化结构设计，移除了Vuex中的mutations和模块嵌套，支持Vue2和Vue3，并兼容Composition API风格。
Pinia的核心特性 简化API设计。 移除了Vuex中冗长的mutations，仅保留state、getters和actions，更贴近组件开发习惯。
- 支持Composition API风格，与Vue3的响应式系统深度集成。
- TypeScript友好。 提供完整的类型推断，解决了Vuex对TypeScript支持不佳的问题。
- 扁平化架构。 废弃模块嵌套和命名空间，所有Store通过独立定义、按需引入的方式管理，降低复杂度。
| 特性 | Pinia | Vuex |
|---|---|---|
| API复杂度 | 更简洁，无mutations | 需定义mutations和actions |
| TypeScript | 原生支持类型推断 | 需额外配置 |
| 模块结构 | 扁平化独立Store | 嵌套模块+命名空间 |
二、插件
虽然它们都为开发者提供了全局的响应式数据存储方案，但是有一点我们知道，页面刷新后，这些数据就都丢失了。有时候我们需要更持久的存储，当然，我们可以使用本地存储，但是有插件能更好地帮我们解决持久化问题。
插件 pinia-plugin-persistedstate旨在通过一致的 API 为每个人和每个项目提供对 Pinia store 的持久化。无论你是习惯使用默认值来保存一个完整的 store，还是需要具有多个 storage 和一个自定义序列化器的细粒度配置，该插件都能帮你搞定，所有这些都在您想要持久化的存储上的同一个persist选项中。
三、用法
1、入口处引入
|
1 2 3 4 5 |
import { createPinia } from 'pinia' import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' const pinia = createPinia() pinia.use(piniaPluginPersistedstate) |
2、在pinia配置中使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { defineStore } from 'pinia'; export const useTTSStore = defineStore({ id: 'app-tts', state: ()=> ({ ttsWordsList: [], }), getters: { getTTSWordsList(state){ return state.ttsWordsList }, }, actions: { }, persist: true, // 注意这里 }) |
ok，这样就可以了，你再刷新，数据仍旧可用。大家可以从它的官方文档中去看更多使用方法，比如指定data里某个数据持久化，也可以设置整站数据持久化，这里就不再赘述。
四、原理
pinia-plugin-persistedstate 的本质是利用浏览器存储机制（如 localStorage 或 sessionStorage）实现 Pinia 状态持久化的插件，其核心原理和功能如下：
1、核心原理
- 状态存储：在应用初始化时，插件会从指定的存储介质（如 localStorage）中读取数据，并将其与 Pinia 的初始状态合并，确保应用可以从之前的状态继续运行。
- 状态更新：当 store 中的状态发生变化时，插件会自动将变化的数据序列化为 JSON 字符串，并存储到指定的存储介质中，保证数据的持久性。
2、主要功能
- 存储方式选择：支持将状态存储在 localStorage 或 sessionStorage 中，开发者可根据需求选择合适的存储方式。
- 自定义存储键名：允许开发者自定义存储的键名，避免与其他应用冲突。
- 部分状态持久化：可通过
paths选项指定需要持久化的状态路径，仅对必要的数据进行持久化，提高性能和效率。 - 自定义序列化和反序列化：支持自定义序列化和反序列化逻辑，方便处理特殊的数据结构，如日期对象或自定义对象。
- 多存储策略组合：可以为不同的状态指定不同的存储方式和键名，实现更灵活的状态管理。