vue-cli监听组件加载完成的方法
更新时间:2018年09月07日 09:31:29 作者:oceanheaven_web
今天小编就为大家分享一篇vue-cli监听组件加载完成的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
在使用vue-cli开发项目时遇到过一个问题,要求是页面组件全部加载完成后再执行某个函数,给上代码参考,方法可能有点笨,好在实现了功能。
1、安装vuex
npm install vuex --save
2、在项目目录下找到store.js文件
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //监听nav模块加载完 const m_classifyone = { state: { count:0 }, mutations: { increment (state) { state.count++ } } } const store = new Vuex.Store({ modules: { a: m_classifyone, b: m_classifyonepage, c:currentpage } }) export default store;
3、在子组件中
created(){ //数据请求完成后 this.$post(address.addr+controll.mallcontroll+'/getMallHome').then(message => { //这里使用箭头函数是为了不改变this指向 this.$store.commit('increment'); }) }
4、通过store判断子组件数据加载完成
mounted(){ //通过store判断当前组件是否加载完成,加载完成执行页面框架 var count = 0; let countfn = function(count){ if(count>0){ //子组件加载完成清除计时器,调用方法 clearInterval(st) pagef.pageFramefn(); } } let st = setInterval(e => { count = this.$store.state.a.count; countfn(count) }) //通过store判断当前组件是否加载完成,加载完成执行页面框架 }
以上这篇vue-cli监听组件加载完成的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserve
这篇文章主要介绍了vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver实例详解,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-03-03Vue3中reactive变量重新赋值无法响应的3种处理方法
这篇文章主要给大家介绍了关于Vue3中reactive变量重新赋值无法响应的3种处理方法,在Vue3中可以使用reactive函数将一个普通对象转换为响应式对象,需要的朋友可以参考下2023-08-08使用vis-timeline绘制甘特图并实现时间轴的中文化(案例代码)
这篇文章主要介绍了使用vis-timeline绘制甘特图并实现时间轴的中文化(案例代码),本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-02-02Vue中transition单个节点过渡与transition-group列表过渡全过程
这篇文章主要介绍了Vue中transition单个节点过渡与transition-group列表过渡全过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-04-04
最新评论