兴国资源网 Design By www.nnzcdc.com
解决vuex页面刷新导致数据丢失问题
vuex数据是存在内存当中,当页面刷新之后vuex数据自然会丢失。我们有两种方法解决该问题:
1.使用vuex-along
2.使用localStorage或者sessionStroage
1.使用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' //导入插件
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中 })] });
2.使用localStorage或者sessionStroage
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 数据丢失的资料请关注其它相关文章!
兴国资源网 Design By www.nnzcdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
兴国资源网 Design By www.nnzcdc.com
暂无评论...
更新日志
2024年05月20日
2024年05月20日
- 张琍敏1978-雪中莲[台湾复刻版][WAV+CUE]
- 叶蕴仪1993-睡美人[日本版][WAV+CUE]
- 夜晚助兴音乐-群星《新时代床头音乐-性能量》2CD[WAV]
- 24K德国HD金碟《历届奥斯卡获奖金曲》3CD[WAV整轨]
- 邰正宵《重燃爱恋 贰 Walk On》[FLAC/分轨][431.72MB]
- 苏文劭《雨停出来走走》[320K/MP3][81.11MB]
- 苏文劭《雨停出来走走》[FLAC/分轨][210.76MB]
- 群星《2024好听新歌04》十倍音质WAV分轨
- 陈宁《弹指之间HQ》头版限量[低速原抓WAV+CUE]
- 陈宁《故人还》HQCDII限量签名版[低速原抓WAV+CUE]
- 苏文劭《春曲(Lessons)》[320K/MP3][39.8MB]
- 苏文劭《春曲(Lessons)》[FLAC/分轨][97.78MB]
- 群星《2006香港高级视听展原音精选 SACD》[ISO][2G]
- 张琍敏1977-枫林小雨[台湾复刻版][WAV+CUE]
- 林一峰2014-COOKINGMUSIC[香港首版][WAV+CUE]