解决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 相关文章推荐
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
js 幻灯片的实现
Dec 06 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
Vue异步加载about组件
Oct 31 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 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
php获取post中的json数据的实现方法
2011/06/08 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
vue如何截取字符串
2019/05/06 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
基于Python的OCR实现示例
2020/04/03 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
基于Python实现天天酷跑功能
2021/01/06 Python
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
教师节祝酒词
2015/08/11 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python