解决vuex页面刷新导致数据丢失问题

      vuex是大家使用vue时大多数都会选择的,但是当页面刷新之后vuex数据会丢失,因为页面刷新之后代码重新加载这样vuex的数据自然就会为空。怎么解决这个问题呢?vuex自身好像没有太好的解决方案,但是我们可以利用localStorage和sessionStorage对数据进行保存。这样这个问题就解决了。这个方法比较简单但是其实这样做就和vuex没有太大的关系了,我们可以将数据存在localStorage中为什么还要用vuex呢?所以这种方法可用但是不建议,那么还有什么解决方案呢? 其实网上也有很多解决这个问题的三方组件,例如 vuex-along。

  vuex-along的实质也是将vuex中的数据存放到localStorage或者sessionStroage中,只不过这个存取过程这个组件会帮我们完成,我们只需要用vuex的读取数据方式操作就可以了,简单了解一下vuex-along的使用方法。

  安装vuex-along: 

npm install vuex-along --save

  配置vuex-along: 在store/index.js 中最后添加以下代码:

 
  
import VueXAlong from 'vuex-along'
plugins: [VueXAlong({
    name: 'along',     //存放在localStroage或者sessionStroage 中的名字
    local: false,      //是否存放在local中  false 不存放 如果存放按照下面session的配置配
    session: { list: [], isFilter: true } //如果值不为false 那么可以传递对象 其中 当isFilter设置为true时, list 数组中的值就会被过滤调,这些值不会存放在seesion或者local中
  })]

  上面配置之后就可以正常使用vuex了,页面刷新数据也不会丢失了。

  当然这种问题的解决方案很多,但是大多数都要借助seesion或local的帮助,如果不使用组件的化,可以在页面刷新之前将vuex的数据存放在seesion或local中, 刷新事件(beforeunload) 。

 

转载于:https://www.cnblogs.com/webtaotao/p/11361868.html

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值