解决vue2.x中数据渲染以及vuex缓存的问题
作者:刈懋 发布时间:2023-07-02 16:59:24
最近在学习Vue.js,把自己遇到的问题做个记录,所以,今天添加一点小笔记。
在项目中遇到两个问题,简单的做个笔记来记录自己解决的问题,可能不是很好的处理办法,欢迎提出,自己还在不断优化中...
第一个是vue在加载页面的时候,会先加载静态资源,这个时候数据还没有请求回来,用户会先看到静态的内容(就是页面固定写死的),过一会才会有数据回来渲染,这体验是很差的,其实解决办法也很简单,就是用vue里的 v-if 来判断请求的数据是否返回...
<div class="container" id="app" v-cloak>
<div v-if='moneyInMsg.uuid'>
<in-account-msg :money-in-msg="moneyInMsg"></in-account-msg>
</div>
</div>
这里的 v-if = 'moneyInMsg.uuid' 就是来判断数据有没有请求回来,如果请求回来就让他显示,没有请求到数据,就让他loading,这样体验就会好很多。在这里还需要注意的是,v-if判断的数据源,是数据返回的字段,如果两个字段只能存在其一的话,可以v-if ='a || b' 来判断数据是否成功的返回;还要注意的一点是,不能直接在组件里用v-if判断,也不能直接在根标签里判断,直接嵌套一个div就可以解决,并不影响样式,只做数据是否正常返回的显示作用;
第二个就是在使用vuex时,有数据缓存;我遇到的情况是,在列表页点击进入详情页,返回到列表页,在进入另一个详情页的时候,数据会显示之前的数据,同时页面还在loading(接口返回的数据比较慢),过一会数据返回的时候,才重新渲染页面。可能是自己对vuex理解的不够深入,没有在vuex基础上解决这个问题。虽然曲折的解决了这个问题,但是不够zhuang,但是解决了问题,后期再做优化。
在之前解决的方案中,是进入页面的时候,重新刷新页面,重新请求数据,代码如下:
export const refresh = (title) => {
document.title = title;
let iframe = document.createElement('iframe');
iframe.src = require('./mm.jpg');
iframe.setAttribute('style', 'display:none;');
let loadFn = function () {
iframe.removeEventListener('load', loadFn);
document.body.removeChild(iframe);
console.info('Page Title IS ' + title);
iframe = null;
loadFn = null;
}
document.body.appendChild(iframe)
iframe.addEventListener('load', loadFn);
}
但是没有达到预期的效果,依然会出现上面的情况... 丫的,抓狂了...(被别人催的感觉真的不爽...)
百度啊,google啊,都没有遇到这种情况的?找到一个,还是提问的,没有回答的,好吧,还是靠自己。自己动手,丰衣足食啊...
思路是,定义一个参数status为false,当数据没有请求回来,就不显示,也是用上面的方式来判断,一直loading(请求失败,去掉loading),当数据返回的时候,让status为true;使用$nextTick来更新数据...
贴上自己部分的代码作为参考:
<template>
<div v-if='status && order.name'>
//页面展示的数据
</div>
</template>
<script>
export default{
data(){
return {
status:false
}
},
created(){
var _this = this;
this.setDd({res =>{
_this.$nextTick(function(){
_this.status= true
});
}})
},
computed:{
...mapGetters({//getter获取的数据})
},
methods:{
...mapActions(['setDd']) //获取数据的方法
}
}
</script>
处理的方式比较丑陋...,但是实现了想要的效果;这里注意一点就是v-if的判断问题。(v-if='status && order.name')这个用了并且,目的是有数据返回,才能让他显示,如果没有数据,会显示静态的值,数据都为underfind...
来源:http://www.cnblogs.com/wxb-it/p/7122071.html
猜你喜欢
- 1. A List Apart CSS TopicsA List Apart是一个CSS优秀文章的收集网站,从1999年开始收集文章,关注最
- 有时候我们可能会把CSV中的数据导入到某个数据库的表中,比如做报表分析的时候。对于这个问题,我想一点也难不倒程序人员吧!但是要是SQL Se
- 什么是goroutine?Goroutine是建立在线程之上的轻量级的抽象。它允许我们以非常低的代价在同一个地址空间中并行地执行多个函数或者
- URL dispatcher简单点理解就是根据URL,将请求分发到相应的方法中去处理,它是对URL和View的一个映射,它的实现其实也很简单
- 如果你的Mysql数据库安装在centos7的系统上,并且你的操作系统启用了防火墙。应用要访问mysql数据库,你有2个解决方案。方案一:停
- 一主一从: Master: OS:centos release 5.6 DB:mysql 5.5.8 IP:192.168.1.2 Slav
- cgi.h #ifndef CGI_H#define CGI_H#include <stdio.h>#include <s
- python中ord函数Python ord()函数 (Python ord() function)ord() function is a
- 摘要: Portal是IT领域的新技术,是企业信息化工作的发展方向之一。本文首先介绍了Oracle Portal的定义、特点,接着阐述了po
- 1.普通的输出:print(str)#str是任意一个字符串,数字···2.格式化输出: print('1,2,%s,%d'
- 前言前段时间,因为项目需求,需要根据关键词搜索聊天记录,这不就是一个搜索引擎的功能吗?于是我第一时间想到的就是 ElasticSearch
- 这篇文章主要介绍了python GUI自动化实现绕过验证码登录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,
- 环境:Ubuntu16.4 python版本:3.6.4 库:wordcloud这次我们要讲的是爬取QQ音乐的评论并制成云词图,我们这里拿周
- 这篇文章主要介绍了Python遍历字典方式就实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友
- (1)服务器配置:[root@localhost ~]# cd /usr/local/src/[root@localhost src]# w
- 各位想必都知道,onfocus="this.blur()"这条代码能消除链接时的虚线框,但你有没有想过,如果你的网页上有
- 面向对象设计与面向对象编程的关系 面向对象设计(OOD)不会特别要求面向对象编程语言。事实上,OOD 可以由纯结构化语言来实现,比
- 下面写一下,这两个要是有no了,怎么恢复。。 如果是slave_io_running no了,那么就我个人看有三种情况,一个是网络有问题,连
- 每次写博客都是源于纳闷,python解析pcap这么常用的例子网上竟然没有,全是一堆命令行执行的python,能用吗?玩呢?pip安装sca
- 本文研究的主要是Python内建模块struct的相关内容,具体如下。Python中变量的类型只有列表、元祖、字典、集合等高级抽象类型,并没