Vue3 Pinia持久化存储
一、Pinia持久化存储
二、使用步骤
1.安装插件
npm i pinia-plugin-persist --save
2.store/index.js
import { createPinia } from 'pinia' import piniaPluginPersist from 'pinia-plugin-persist' const store = createPinia() store.use(piniaPluginPersist) export default store
3.store/user.js
export const useUserStore = defineStore({ id: 'user', state: () => { return { name: '张三' } }, // 开启数据缓存 persist: { enabled: true } })
4.自定义 key
数据默认存在 sessionStorage 里,并且会以 store 的 id 作为 key。 这里sessionStorage和localStorage的区别 点击链接 查看详情。
代码如下(示例):
persist: { enabled: true, strategies: [ { key: 'my_user', storage: localStorage, } ] }
5.持久化局部 state
默认所有 state 都会进行缓存,你能够通过 paths 指定要长久化的字段,
其余的则不会进行长久化。
代码如下(示例):
state: () => { return { name: '张三', age: 18, gender: '男' } }, persist: { enabled: true, strategies: [ { storage: localStorage, paths: ['name', 'age'] } ] }