Vuex---数据持久化的多种方式

Vuex在Vue项目中的使用常常伴随着页面刷新后数据丢失的问题。传统的解决办法结合Vuex和sessionStorage,但不够优雅。文章介绍了两种Vuex数据持久化的封装方法,一种是传统的直接在Vuex中调用,另一种是使用特定插件,该插件支持多个Vuex版本,只需简单配置即可实现数据持久化。内部默认使用存储,也可根据需求自定义存储方式。
摘要由CSDN通过智能技术生成

vuex无论你喜不喜欢或者想不想,但凡涉及到了Vue项目多数时候你都会需要。但万物都有弊端,页面刷新后状态,数据丢失一直很头大。
在这里插入图片描述
而这个问题我们也常常在面试中被问到,传统的解决方案是Vuex+sessionStorage等存储方案解决
在这里插入图片描述
好吧 不墨迹直接上封装好的干货,喜欢那个选那个。直接在Vuex中调用即可

var Storage = {
   
  // ==================sessionStorage设置缓存================
  // 设置缓存
  sessionSet: function (name, data, expires) {
   
    sessionStorage.removeItem(name)
    sessionStorage.setItem(name, JSON.stringify(data))
    if (expires && expires instanceof Date) {
   
      sessionStorage.removeItem(`${
     name}__expires`)
      sessionStorage.setItem(`${
     name}__expires`, new Date(expires).getTime())
    }
  },
  // 获取缓存
  sessionGet: function (name) {
   
    if (sessionStorage.getItem(`${
     name
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值