vue-cli监听组件加载完成的方法


Posted in Javascript onSeptember 07, 2018

在使用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监听组件加载完成的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 #Javascript
vue加载完成后的回调函数方法
Sep 07 #Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 #Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 #Javascript
详解JavaScript事件循环机制
Sep 07 #Javascript
解决vue 引入子组件报错的问题
Sep 06 #Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 #Javascript
You might like
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
深入理解Node module模块
2018/03/26 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
Python实用工具FuckIt.py介绍
2019/07/02 Python
python障碍式期权定价公式
2019/07/19 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
校长先进事迹材料
2014/02/01 职场文书
广告词串烧
2014/03/19 职场文书
省文明单位申报材料
2014/05/08 职场文书
学雷锋宣传标语
2014/06/25 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
闪闪的红星观后感
2015/06/08 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
朋友离别感言
2015/08/04 职场文书
宪法宣传标语100条
2019/10/15 职场文书
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis