解决vuex数据异步造成初始化的时候没值报错问题


Posted in Javascript onNovember 13, 2019

当使用vue做登录的时候,我们会把拿到的部分用户信息存在vuex+cookie中,我们知道,vuex的数据是会随着浏览器刷新而丢失的,此时我们会重新请求接口对vuex的数据进行再次赋值,如下

当有cookie但是vuex没有数据的时候再次请求赋值

解决vuex数据异步造成初始化的时候没值报错问题

state

解决vuex数据异步造成初始化的时候没值报错问题

mutation

解决vuex数据异步造成初始化的时候没值报错问题

vuex的数据是异步的,当我们页面需要直接拿vuex的值进行渲染的时候,初始化瞬间(即请求过程进行的时候),vuex是没有这个值的,如何解决这个问题,暂时总结了三种方法,希望有遇到的大佬进行补充和查错:

1.通过watch和mouted监听并且初始化vuex数据

在mounted的时候初始化该数据 并且watch该数据(不推荐)

2.在computed赋值该数据 并且在dom渲染的时候做非空的判断

解决vuex数据异步造成初始化的时候没值报错问题

解决vuex数据异步造成初始化的时候没值报错问题

或者:

解决vuex数据异步造成初始化的时候没值报错问题

解决vuex数据异步造成初始化的时候没值报错问题

3.使用拓展运算符

解决vuex数据异步造成初始化的时候没值报错问题

以上这篇解决vuex数据异步造成初始化的时候没值报错问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现简单的购物车有图有代码
May 26 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
jQuery中的select操作详解
Nov 29 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 #Javascript
基于vue-cli3和element实现登陆页面
Nov 13 #Javascript
vue data引入本地图片的两种方式小结
Nov 13 #Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 #Javascript
解决vue v-for src 图片路径问题 404
Nov 12 #Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 #Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 #Javascript
You might like
apache rewrite_module模块使用教程
2008/01/10 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
php生成mysql的数据字典
2016/07/07 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
Python装饰器简单用法实例小结
2018/12/03 Python
python实现简单加密解密机制
2019/03/19 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
关于环保的建议书
2014/05/12 职场文书
节电标语大全
2014/06/23 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
关于感恩的作文
2019/08/26 职场文书
Redis唯一ID生成器的实现
2022/07/07 Redis