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

Posted 2022-08-04 webtaotao

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