解决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 相关文章推荐
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
探索node之事件循环的实现
Oct 30 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
function.inc.php超越php
2006/12/09 PHP
PHP技术开发技巧分享
2010/03/23 PHP
PHP小教程之实现链表
2014/06/09 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
python 剪切移动文件的实现代码
2018/08/02 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
python序列化与数据持久化实例详解
2019/12/20 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
python sleep和wait对比总结
2021/02/03 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
HTML5新增加的功能详解
2016/09/05 HTML / CSS
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
擅自离岗检讨书
2014/02/11 职场文书
争先创优公开承诺书
2014/08/30 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers
如何使JavaScript休眠或等待
2021/04/27 Javascript
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
深入理解python协程
2021/06/15 Python
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA