Pinia持久化插件pinia-plugin-persistedstate

如何让pinia存放的东西不丢失？你还在为页面刷新而丢失数据，多次调用接口而苦恼吗？你还在为localstore一个一个存感到繁琐吗？请使用这款pinia-plugin-oersistedstate全自动持久化插件

1，下载

npm install pinia-plugin-persistedstate

pnpm add pinia-plugin-persistedstate 

这两种选一种就行了

2，在main.ts中配置

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

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

3，在store中启用持久化

•  组合式API：

  export const useStore = defineStore('store', () => {
      // 现有代码...
      
      return {
          // 现有返回值...
      }
  }, {
      persist: true
  })

   

• 正常API：

  // store.js
  export const useStore = defineStore('store', {
    state: () => ({ count: 0 }),
    persist: true // 启用持久化
  })

  这样做 即使切换页面或刷新浏览器，count 的值也会从 localStorage 中恢复。

方案	原理	持久化范围	适合场景
Pinia 持久化插件	将状态保存到本地存储	跨页面、跨会话（即使关闭浏览器）	需要长期保存的数据（如用户登录状态）