vuex数据是存在内存当中,当页面刷新之后vuex数据自然会丢失。我们有两种方法解决该问题:
1.使用vuex-along
2.使用localStorage或者sessionStroage
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' //导入插件
export default new Vuex.Store({ //modules: { //controler //模块化vuex //}, plugins: [VueXAlong({ name: 'store', //存放在localStroage或者sessionStroage 中的名字 local: false, //是否存放在local中 false 不存放 如果存放按照下面session的配置 session: { list: [], isFilter: true } //如果值不为false 那么可以传递对象 其中 当isFilter设置为true时, list 数组中的值就会被过滤调,这些值不会存放在seesion或者local中 })] });
created() { //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store")) { this.$store.replaceState( Object.assign( {}, this.$store.state, JSON.parse(sessionStorage.getItem("store")) ) ); } //在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventListener("beforeunload", () => { sessionStorage.setItem("store", JSON.stringify(this.$store.state)); }); },
上面两种方法都可以解决vuex页面刷新导致数据丢失问题。按照上面的方法配置之后就可以正常使用vuex了,页面刷新数据也不会丢失了。
以上就是vuex页面刷新导致数据丢失的解决方案的详细内容,更多关于vuex 数据丢失的资料请关注站长技术其它相关文章!
项目中用到的一些特殊字符和图标 html代码 XML/HTML Code 复制内容到剪贴板 div ...
DELETEFROMTablesWHEREIDNOTIN(SELECTMin(ID)FROMTablesGROUPBYName) Min的话保...
Elasticsearch 是通过 Lucene 的倒排索引技术实现比关系型数据库更快的过滤。特...
复制代码 代码如下: % URL="http://news.163.com/special/00011K6L/rss_newstop....
上篇文章给大家介绍了 Java正则表达式匹配,替换,查找,切割的方法 ,接下来,...
工具:Eclipse,Oracle,smartupload.jar;语言:jsp,Java;数据存储:Oracle。...
错误描述: 在开发.net项目中,通过microsoft.ACE.oledb读取excel文件信息时,报...
本文实例讲述了Laravel框架源码解析之反射的使用。分享给大家供大家参考,具体如...
正则忽略大小写 – RegexOptions.IgnoreCase 例如: 复制代码 代码如下: Str = R...
4月11日20:30~22:00通过腾讯会议进行了第二次在线学习讨论我把学习笔记整理一下...