解决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 相关文章推荐
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 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
无线电的诞生过程
2021/03/01 无线电
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
区分JS中的undefined,null,"",0和false
2007/03/08 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
Python中time模块和datetime模块的用法示例
2016/02/28 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
int在python中的含义以及用法
2019/06/27 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
智利最大的网上商店:Linio智利
2016/11/24 全球购物
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
2014新年元旦活动策划方案
2014/02/18 职场文书
电子商务专业求职信
2014/03/08 职场文书
法学专业求职信
2014/07/15 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
mysql 获取时间方式
2022/03/20 MySQL