vue-cli监听组件加载完成的方法
2018-09-07 09:31
1131 查看
在使用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监听组件加载完成的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue-cli监听组件加载完成
- vue实现图片加载完成前的loading组件方法
- vue加载完成后的回调函数方法
- Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
- vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
- vue2.x 父组件监听子组件事件并传回信息的方法
- Vue-cli单文件组件引入less、sass、css样式的不同方法
- jquery加载单文件vue组件的方法
- vue-cli项目优化方法- 缩短首屏加载时间
- android 监听整个界面加载完成的方法
- Vue动态加载异步组件的方法
- 使用vue.js在页面内组件监听scroll事件的方法
- 在vue-cli中组件通信的方法
- 浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
- vue按需加载组件webpack require.ensure的方法
- vue路由组件按需加载的几种方法小结
- vue-cli 子组件向父组件传递参数,触发父组件方法
- vue+webpack实现异步组件加载的方法
- vue2.0使用动态组件实现tab切换效果(vue-cli)
- 如何在页面加载完成后再去做某事?什么方法可以判断当前页面加载已完成?