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定时器完整实例
Feb 10 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
node+express制作爬虫教程
Nov 11 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
解决vue props 拿不到值的问题
Sep 11 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
深入理解javascript中的this
Feb 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
php include,include_once,require,require_once
2008/09/05 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
php 地区分类排序算法
2013/07/01 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
matplotlib中legend位置调整解析
2017/12/19 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
Python中有几个关键字
2020/06/04 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
美国在线印刷公司:PsPrint
2017/10/12 全球购物
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
项目考察欢迎辞
2014/01/17 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
市场营销毕业求职信
2014/08/07 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
小学优秀学生评语
2014/12/29 职场文书
紫日观后感
2015/06/05 职场文书
团组织关系介绍信
2019/06/24 职场文书