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连接access数据库的方法
Nov 17 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 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多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
python实现自动发送邮件
2018/06/20 Python
python url 参数修改方法
2018/12/26 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
python函数的万能参数传参详解
2019/07/26 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
python中pivot()函数基础知识点
2021/01/03 Python
优秀党员转正的自我评价
2013/10/06 职场文书
给酒店员工的表扬信
2014/01/11 职场文书
四个太阳教学反思
2014/02/01 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
单位政审意见范文
2015/06/04 职场文书
新闻通讯稿范文
2015/07/22 职场文书
python自动化八大定位元素讲解
2021/07/09 Python