解决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

解决vuex页面刷新导致数据丢失问题相关推荐

前端有关解决Vuex页面刷新之后数据丢失的问题
问:有关vuex刷新页面之后数据丢失的问题答:vuex+缓存解决这个问题. 在使用vuex的时候,刷新页面之后在vuex中存储的数据会丢失,而缓存在刷新页面的时候数据是不会丢失的,所以把vuex和缓 ...
解决vue页面刷新或者后退参数丢失的问题
解决vue页面刷新或者后退参数丢失的问题参考文章: (1)解决vue页面刷新或者后退参数丢失的问题 (2)https://www.cnblogs.com/myfate/p/11573824.html ...
Vuex页面刷新数据丢失的问题
为什么说刷新页面vuex的数据会丢失刷新页面vuex的数据会丢失属于正常现象,(vuex的数据并不是弄丢了,而是初始化了,回到初始值,回到原点了).因为JS的数据都是保存在浏览器的堆栈内存里面的,刷 ...
vue全局变量页面刷新时数据丢失问题
页面刷新后vue全局变量数据丢失在开发中,我们需要将一些数据存到全局变量中,如用户的用户名等,便于页面展示,保存从服务器发送请求返回的数据,以避免在不同组件发送相同请求时,重复请求服务器. 方法一: ...
Vuex-along 解决Vuex在刷新页面后数据丢失问题
首先安装Vuex-along npm install vuex-along --save 或者 yarn add vuex-along 在Vuex的配置文件中使用 ↑↑↑↑到这里你已经可以使用了 ↑↑ ...
nuxt的asyncdata页面刷新params数据丢失_React navigation goBack方法返回刷新
react navigation version:5.x 刚开始写react-native发现用react navigation的goBack方法不会重新刷新要返回的页面,恰巧我想写的是修改资料的页面 ...
解决页面刷新数据丢失，数据持久化问题
npm i vuex-persistedstate 数据持久化,解决vue中页面刷新,数据丢失的情况
vue从后台获取新数据后刷新_vue传参页面刷新数据丢失问题
在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...
Echaer图表组件传值,页面刷新数据丢失
记录一次Echart 图表封装之后,父子组件之间的传值,页面刷新后数据丢失的问题, (如遇到该问题,首先确保组件之间传值没有问题,我在该问题上花了很多的时间) 原因: 页面刚保存是有显示,然而刷新页面 ...

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

解决vuex页面刷新导致数据丢失问题相关推荐

最新文章

热门文章