父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法


Posted in Javascript onApril 25, 2018

场景:

我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加载子组件,子组件在渲染的时候还没有获取到更新之后的related值,即使在子组件中watch该值的变化依然不能渲染出来子组件的相关新闻内容。

我的解决办法:

父组件像子组件传值,当父组件执行了获取页面详情的方法之后,state值related更新,然后传给子组件,子组件再进行渲染,可以正常获取到。

父组件代码:

<template>
 <div id="newsDetails">
  <mt-header title="详情">
   <router-link to="/" slot="left">
    <mt-button icon="back"></mt-button>
   </router-link>
  </mt-header>
  <div class="details clearfloat">
   <h1 class="titleFont">
    {{ title }}
   </h1>
   <div class="clearfloat sourceWrap">
    <ul class="sourceFont">
     <li v-if="(pubNews==true)">
      <span class="source">{{pubName}}</span>
     </li>
     <li>
      <span class="authorName">{{authorName}}</span>
      <span class="time">{{createAt|formatTime}}</span>
     </li>
    </ul>
    <span v-if="(pubNews==true)" class='btnFollow' @click="follow">关注</span>
   </div>
   <div class="bodyFont clearfloat" id="bodyFont" ref="bodyFont" :class="{bodyHeight:contentStatus}">
    <div v-html="content"></div>
    <div class="editor" v-if="editorName">责任编辑:{{editorName}}</div>
   </div>
   <div class="contentToggle" @click="contentStatus=!contentStatus" v-if="contentStatus">阅读全文</div>
   <Related :related="related"></Related>

<!--重点是这里 父组件向子组件传值-->
 </div> </div> </template>

import { Toast } from 'mint-ui';
 import {mapState} from 'vuex'
 import Related from './Related.vue'
 import moment from 'moment';
 export default{
  name:"NewsDetails",
  components:{
   Related,
  },
  data(){
   return {
    id:this.$route.params.id,
    topicType:"news",
    contentStatus:false,
    curHeight:0,
    bodyHeight:5000,
    hotCommentScrollTop:0
   }
  },
  created(){
   this.id=this.$route.params.id;
   this.fetchData();
   moment.locale('zh-cn');
  },
  mounted(){
   setTimeout(()=>{
    this.contentToggle();
   },500)
  },
  watch: {
   '$route'(to,from){
    this.id=this.$route.params.id;
    this.fetchData();
   }
  },
  computed: {
   ...mapState({
    title: state => state.newsDetails.title,
    authorName: state => state.newsDetails.authorName,
    pubNews: state => state.newsDetails.pubNews,
    pubName: state => state.newsDetails.pubName,
    editorName: state => state.newsDetails.editorName,
    createAt: state => state.newsDetails.createAt,
    content: state => state.newsDetails.content,
    myFavourite: state => state.newsDetails.myFavourite,
    related: state => state.newsDetails.related,
   })
  },
  filters:{
   formatTime(time){
    return moment(time).fromNow();
   },
  },
  methods:{
   fetchData(){
    this.$store.dispatch('getDetails',this.id);
   },
   follow(){
    Toast('登录后进行关注');
    this.$router.push("/login");
   },
   contentToggle(){
    this.curHeight=this.$refs.bodyFont.offsetHeight;
    if(parseFloat(this.curHeight)>parseFloat(this.bodyHeight)){
     this.contentStatus=true;
    }else{
     this.contentStatus=false;
    }
//    this.hotCommentScrollTop=this.$refs.hotComment.height;
    console.log(this.hotCommentScrollTop);
   },
  }
 }

子组件related.vue

<template>
  <div v-if="lists.length>0">
    <div class="tagTitle"><span>相关新闻</span></div>
    <div class="listItem" v-if="(item.type=='little')" v-for="(item,index) in lists" :to="{name:'details',params:{id:item.id}}" :key="index" @click="browserDetection()">
     <div class="listImg1">
      <!--<img :src="{lazy==loaded?item.thumb[0]:lazy==loading?'../../assets/images/little_loading.png':lazy==error?'../../assets/images/little_loading.png'}" alt="" v-lazy="item.thumb[0]">-->
      <img :src="item.thumb[0]" alt="" v-lazy="item.thumb[0]">
     </div>
     <div class='titleBox1'>
      <p class="listTitle">{{item.title}}</p>
      <div class="titleInfo">
       <span class="openApp">打开唐人家</span>
       <span v-if="item.top==true" class="toTop">置顶</span>
       <!--<svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-dianzan" rel="external nofollow" ></use>
       </svg>-->
       <span class="like">阅读 {{item.read}}</span>
       <span class="time">{{item.createAt|formatTime}}</span>
      </div>
    </div>
   </div>
  </div>
</template>
<script>
 import {mapActions, mapState, mapGetters} from 'vuex'
 import moment from 'moment'
 export default{
  data(){
   return {
    lists: [],
    id:this.$route.params.id,
   }
  },
  props:{
    related:Array  //重点是这里
  },
  created(){
   moment.locale('zh-cn');
  },
  /*computed: {
   ...mapState({
    related: state => state.newsDetails.related,
   })
  },*/
  filters:{
   formatTime(time){
    return moment(time).fromNow();
   },
  },
  methods:{
  },
  watch: {
   related (val) {
    this.lists = val;
   },
   '$route'(to,from){
    this.id=this.$route.params.id
   }
  }
 }
</script>

效果如图:

父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法

总结

以上所述是小编给大家介绍的父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 #Javascript
详解Vue.js中.native修饰符
Apr 24 #Javascript
Vue 动态设置路由参数的案例分析
Apr 24 #Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 #Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 #Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 #Javascript
vue中$refs的用法及作用详解
Apr 24 #Javascript
You might like
虫族 Zerg 热键控制
2020/03/14 星际争霸
新浪新闻小偷
2006/10/09 PHP
利用js调用后台php进行数据处理原码
2006/10/09 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
js常用函数 不错
2006/09/08 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
brook javascript框架介绍
2011/10/10 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
Python深入学习之对象的属性
2014/08/31 Python
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
医疗纠纷协议书
2014/04/16 职场文书
档案信息化建设方案
2014/05/16 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
升职自荐信怎么写
2015/03/05 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书