【Vue】pinia 数据持久化插件 pinia-plugin-persistedstate 使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Vue】pinia 数据持久化插件 pinia-plugin-persistedstate 使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

为什么需要持久化？

刷新浏览器后，重新加载页面时会重新初始化 vue、 pinia，而 pinia 中状态的值仅在内存中存在，而刷新导致浏览器存储中的数据就没了。

在实际开发中，浏览器刷新时，有些数据希望是保存下来的。如用户登录后，用户信息会存储在全局状态中，如果不持久化状态，那么每次刷新用户都需要重新登录了。

要解决这个问题非常简单，在状态改变时将其同步到浏览器的存储中，如 cookie、localStorage、sessionStorage 。每次初始化状态时从存储中去获取初始值即可。

说起来思路很简单，可真正实现起来就各种问题了，所以咱们就使用 pinia 的插件 pinia-plugin-persistedstate 来实现。

pinia-plugin-persistedstate

插件官方文档

安装依赖

npm install pinia-plugin-persistedstate
yarn add pinia-plugin-persistedstate
pnpm add pinia-plugin-persistedstate

引入该插件，在创建 pinia 实例时传入该插件

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

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

export default pinia

在需要持久化状态的模块(modules)中设置 persist

...
const useUserStore = defineStore('user', () => {
	...
}, {
   key: 'user', // Key 用于引用 storage 中的数据
   storage: sessionStorage // 将数据持久化到的 storage 中
   // 更多配置请参考官方文档
})