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 相关文章推荐
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
Layui 动态禁止select下拉的例子
Sep 03 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
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
使用Python写个小监控
2016/01/27 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
高三自我鉴定
2013/10/23 职场文书
应届生人事助理求职信
2013/11/09 职场文书
大学生学习自我评价
2014/01/13 职场文书
课程改革实施方案
2014/03/16 职场文书
质量承诺书格式
2014/05/20 职场文书
环境保护建议书
2014/08/26 职场文书
家属答谢词
2015/01/05 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书