所谓数据持久化存储就是当我们关闭页面甚至浏览器时候重新访问,页面数据还停留在那一刻而不会被刷新,它的根本原理还是利用H5的本地存储localstorage和会话存储sessionstorage,在vue2中我们通常会通过vuex-persistedstate插件去实现该功能,而在Pinia中,我们将通过pinia-plugin-persist插件实现
1 | npm i pinia-plugin-persist --save |
1 2 3 4 5 6 7 | import { createPinia } from 'pinia' import piniaPluginPersist from 'pinia-plugin-persist' const store = createPinia() store.use(piniaPluginPersist) export default store |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | export const useUserStore = defineStore({ id: 'user', state: () => { return { name: '张三' } }, // 开启数据缓存 persist: { enabled: true } }) |
数据默认存在sessionStorage里,并且会以store的id作为 key。
1 2 3 4 5 6 7 8 9 | persist: { enabled: true, strategies: [ { key: 'my_user', // 默认key是上面store的id,可自定义key storage: localStorage, // 默认是sessionStorage会话存储,可以设置为localStorage本地长存储 } ] } |
默认所有 state 都会进行缓存,你能够通过 paths 指定要长久化的字段,其余的则不会进行长久化。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | state: () => { return { name: '张三', age: 18, gender: '男' } }, persist: { enabled: true, strategies: [ { storage: localStorage, paths: ['name', 'age'] } ] } |
上一篇:Pinia如何modules模块划分、模块之间如何通信?
下一篇:Vue3中defineAsyncComponent异步组件-可视区范围内懒加载
支付宝扫一扫打赏
微信扫一扫打赏
共 0 条评论关于"Pinia如何让数据持久化存储?"
最新评论