解决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 相关文章推荐
JavaScript 实现??打印?理
Apr 28 Javascript
jQuery ajax cache缓存问题
Jul 01 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
js中function()使用方法
Dec 24 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
js实现日历的简单算法
Jan 24 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
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
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
pandas实现选取特定索引的行
2018/04/20 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
C语言笔试题回忆
2015/04/02 面试题
实习护理工作自我评价
2013/09/25 职场文书
村级个人对照检查材料
2014/08/22 职场文书
食品安全承诺书范文
2014/08/29 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
售房协议书范本
2015/08/11 职场文书
请假条应该怎么写?
2019/06/24 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
教你用python控制安卓手机
2021/05/13 Python
Elasticsearch 聚合查询和排序
2022/04/19 Python