解决VUEX刷新的时候出现数据消失


Posted in Javascript onJuly 03, 2017

通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化。例如:用户的登录信息。

下面,我们使用传递用户登录信息的例子来一步步解决这个问题。

首先,我们的第一个问题是:我在一个组件(例如登录组件页面)中登录了后,其它页面要怎么获取和响应这个变化?(就是这么小白,/(ㄒoㄒ)/~~)

这个答案就是使用vuex啦,在中文版的文档中有这样一句话:

解决VUEX刷新的时候出现数据消失

而这里的计算属性就是我们的伟大的computed属性啦~

(至于前面的通过mutation之类的把数据存入vuex中的过程就省略了,大家上网搜一下例子一大堆,切忌做伸手党哦~)

至于用在我们的用户登录的例子中就像是下面这样:

解决VUEX刷新的时候出现数据消失

这样我们就可以在页面根据用户信息响应式地显示内容了。

那么,我们的第二个问题来了:我是获取到了vuex中的用户信息,但是我一刷新就没有了!!怎么办??在线等!十万火急!!

这个答案就是使用localStorage啦。(了解过html 5的同学应该都知道它,这里我就不科普了。)

一开始我虽然知道可以用localStorage,但是对于使用的逻辑有点乱,所以在这里记一下。

1、在vuex获取到用户信息时(例:state.user_id = user_info.user_id),同时把这个信息存入localStorage(Lockr.set('user_id', state.user_id) 这个Lockr是我用了一个叫Lockr的东西,其实它就是localStorage而已,关于它详细的请看https://github.com/tsironis/lockr);

2、我们定义一个mutation方法,再次把数据从localStorage传给state;

3、我们的问题发生在页面刷新时,可能很多同学就会去想在监听页面刷新事件时触发上面第2步的那个方法。其实不用这么麻烦,在computed属性时,只要我们判断一下用户信息是否为空,为空时调用第2步的那个方法就好了,然后我们把这个state return给那个响应属性就好了;

4、至于为什么这么麻烦在state和localStorage中传来传去,是因为state的值刷新后会没了,而localStorage的值不能响应式地变化(Vue 仅可以对其管理的数据做响应式处理,可以理解为 data 中的数据,localStorage 并不在 Vue 的管理下,自然不会有响应特性);

下面直接上computed处的代码:

解决VUEX刷新的时候出现数据消失

以上就是使用localStorage解决vuex的state的值在刷新之后没有了这个问题的方法。

方法二:

在mount里面commit一次

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
jQuery 性能优化手册 推荐
Feb 23 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
JavaScript解析JSON数据示例
Jul 16 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
JavaScript简单编程实例学习
Feb 14 Javascript
Vue实现随机验证码功能
Dec 29 Vue.js
vue.js学习之UI组件开发教程
Jul 03 #Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 #Javascript
Vue.js实例方法之生命周期详解
Jul 03 #Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 #Javascript
Async Validator 异步验证使用说明
Jul 03 #Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 #Javascript
Require.js的基本用法详解
Jul 03 #Javascript
You might like
php中simplexml_load_string使用实例分享
2014/02/13 PHP
php数组查找函数总结
2014/11/18 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
PHP xpath()函数讲解
2019/02/11 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
jQuery插件开发全解析
2012/10/10 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
vue组件生命周期详解
2017/11/07 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
简单的JAVA编程面试题
2013/03/19 面试题
工业学校毕业生自荐书
2014/01/03 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
消防演习通知
2015/04/25 职场文书
教师节主持词开场白
2015/05/29 职场文书
投资入股协议书
2016/03/22 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
vue实力踩坑之push当前页无效
2022/04/10 Vue.js
python APScheduler执行定时任务介绍
2022/04/19 Python