解决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

标签:vue,渲染,数据
0
投稿

猜你喜欢

  • Python将图片批量从png格式转换至WebP格式

    2023-01-11 00:27:49
  • Flash对象在(x)HTML中的格式和参数及安全性

    2010-04-01 11:55:00
  • ACCESS转SQL Server2000需要注意的问题

    2007-11-18 15:25:00
  • Python3监控疫情的完整代码

    2023-09-24 09:53:19
  • python字符串定义的三种方式

    2022-05-27 08:17:57
  • Python中如何获取类属性的列表

    2023-02-10 21:57:41
  • np.concatenate()函数的具体使用

    2023-06-21 11:15:19
  • mysql查询表是否被锁的方法

    2024-01-19 13:16:41
  • python实现自动化之文件合并

    2023-12-27 07:11:37
  • 再谈float菜单局中

    2009-12-21 19:57:00
  • Python3列表List入门知识附实例

    2023-03-12 06:41:22
  • 使用Javascript监控前端相关数据的代码

    2024-04-17 09:43:02
  • Python 序列化 pickle/cPickle模块使用介绍

    2021-04-28 17:23:21
  • python字符类型的一些方法小结

    2023-06-27 00:00:20
  • 浅谈一下python线程池简单应用

    2023-08-27 10:48:37
  • MAC版修改MySQL初始密码的方法

    2024-01-19 03:19:56
  • python使用循环打印所有三位数水仙花数的实例

    2022-07-02 09:58:59
  • padas 生成excel 增加sheet表的实例

    2023-03-22 04:52:04
  • python 上下文管理器及自定义原理解析

    2023-01-24 20:07:55
  • Python绘制灯笼的示例代码

    2022-02-24 23:10:35
  • asp之家 网络编程 m.aspxhome.com