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 相关文章推荐
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
详解vue 图片上传功能
Apr 30 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
Vue js with语句原理及用法解析
Sep 03 Javascript
JavaScript实现班级抽签小程序
May 19 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 获取客户端的真实ip
2009/11/30 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
javascript getElementsByClassName实现代码
2010/10/11 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
python如何通过twisted实现数据库异步插入
2018/03/20 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
中国电视购物:快乐购
2017/02/04 全球购物
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
自我评价范文分享
2014/01/04 职场文书
高中教师评语大全
2014/04/25 职场文书
小学同学聚会感言
2015/07/30 职场文书
宿舍管理制度范本
2015/08/07 职场文书
禁毒主题班会教案
2015/08/14 职场文书
创业计划书之养殖业
2019/10/11 职场文书
详解nodejs内置模块
2021/05/06 NodeJs