大连城市建设网站semantic

如何让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 持久化插件	将状态保存到本地存储	跨页面、跨会话（即使关闭浏览器）	需要长期保存的数据（如用户登录状态）