父组件中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 相关文章推荐
JavaScript的9个陷阱及评点分析
May 16 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
vue-i18n实现中英文切换的方法
Jul 06 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
如何在PHP中进行身份认证
2006/10/09 PHP
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
PHP扩展开发入门教程
2015/02/26 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
PHP与以太坊交互详解
2018/08/24 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
python实现最速下降法
2020/03/24 Python
Python自带的IDE在哪里
2020/07/01 Python
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
上海微创软件面试题
2012/06/14 面试题
北大研究生linux应用求职信
2013/10/29 职场文书
后进生转化工作制度
2014/01/17 职场文书
幼儿园中秋节活动方案
2014/02/06 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
个园导游词
2015/02/04 职场文书
罚款通知怎么写
2015/04/22 职场文书
运动会主持词大全
2015/07/02 职场文书