vue3 pinia 持久化存储

最新推荐文章于 2025-09-28 10:30:30 发布

原创最新推荐文章于 2025-09-28 10:30:30 发布 · 452 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

前端笔记专栏收录该内容

26 篇文章

订阅专栏

文章介绍了如何在Vue应用中使用pinia库进行状态管理，并结合pinia-plugin-persist插件实现数据的持久化存储。通过设置插件，可以自定义存储位置、key以及选择性持久化特定state字段。

安装pinia

npm i pinia-plugin-persist --save

store/index.js

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export default store

store/user.js【模块化】

export const useUserStore = defineStore({
  id: 'user',
  state: () => {
    return {
      name: '张三'
    }
  },  
  // 开启数据缓存
  persist: {
    enabled: true
  }
})

自定义 key

数据默认存在 sessionStorage 里，并且会以 store 的 id 作为 key

persist: {
  enabled: true,
    strategies: [
    {
      key: 'my_user',
      storage: localStorage,
    }
  ]
}

持久化局部 state

默认所有 state 都会进行缓存，你能够通过 paths 指定要长久化的字段，其余的则不会进行长久化。

state: () => {
  return {
    name: '张三',
    age: 18,
    gender: '男'
  }  
},

persist: {
  enabled: true,
  strategies: [
    {
      storage: localStorage,
      paths: ['name', 'age']
    }
  ]
}