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 string字符串优化问题
Jul 31 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
使用PHP开发留言板功能
2019/11/19 PHP
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
Python 的描述符 descriptor详解
2016/02/27 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
python适合人工智能的理由和优势
2019/06/28 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
业务主管岗位职责
2013/11/20 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
申论倡议书范文
2014/05/13 职场文书
党校毕业心得体会
2014/09/13 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
幼师中班个人总结
2015/02/12 职场文书