vuex页面数据丢失_解决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) 。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值