解决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判断浏览器是否是IE的比较好的办法
May 08 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
微信小程序实现上传多个文件 超过10个
Mar 30 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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
php下使用SMTP发邮件的代码
2008/01/10 PHP
php实现通过ftp上传文件
2015/06/19 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
Jquery replace 字符替换实现代码
2010/12/02 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
详解a++和++a的区别
2017/08/30 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
详解node.js 事件循环
2020/07/22 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
优纳科技软件测试面试题
2012/05/15 面试题
《荷花》教学反思
2014/04/16 职场文书