唯品秀前端博客

所谓数据持久化存储就是当我们关闭页面甚至浏览器时候重新访问,页面数据还停留在那一刻而不会被刷新,它的根本原理还是利用H5的本地存储localstorage和会话存储sessionstorage,在vue2中我们通常会通过vuex-persistedstate插件去实现该功能,而在Pinia中,我们将通过pinia-plugin-persist插件实现

一、安装插件

1
npm i pinia-plugin-persist --save

二、store/index.js

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

三、store/user.js

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
  }
})

四、自定义 key

数据默认存在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

默认所有 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']
    }
  ]
}
本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(1) 打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"Pinia如何让数据持久化存储?"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏