如何解决vue2.x中数据渲染以及vuex缓存的问题-创新互联-成都快上网建站

如何解决vue2.x中数据渲染以及vuex缓存的问题-创新互联

这篇文章主要介绍如何解决vue2.x中数据渲染以及vuex缓存的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都网站建设、网站设计、漠河网络推广、微信小程序定制开发、漠河网络营销、漠河企业策划、漠河品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们大的嘉奖;创新互联为所有大学生创业者提供漠河建站搭建服务,24小时服务热线:18980820575,官方网址:www.cdcxhl.com

在项目中遇到两个问题,简单的做个笔记来记录自己解决的问题,可能不是很好的处理办法,欢迎提出,自己还在不断优化中...

第一个是vue在加载页面的时候,会先加载静态资源,这个时候数据还没有请求回来,用户会先看到静态的内容(就是页面固定写死的),过一会才会有数据回来渲染,这体验是很差的,其实解决办法也很简单,就是用vue里的 v-if 来判断请求的数据是否返回... 

 
   
     
   
 

这里的  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来更新数据...

贴上自己部分的代码作为参考:

 

处理的方式比较丑陋...,但是实现了想要的效果;这里注意一点就是v-if的判断问题。(v-if='status && order.name')这个用了并且,目的是有数据返回,才能让他显示,如果没有数据,会显示静态的值,数据都为underfind...

以上是“如何解决vue2.x中数据渲染以及vuex缓存的问题”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联网站建设公司行业资讯频道!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


本文标题:如何解决vue2.x中数据渲染以及vuex缓存的问题-创新互联
文章地址:http://kswjz.com/article/deghjj.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流