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

 

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐