vue-cli监听组件加载完成的方法

Posted 2023-05-07

参考技术A 在使用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
父组件调用子组件方法及事件详解vuex
中的
state
在组件中如何监听vue路由组件按需加载的几种方法小结vue实现图片加载完成前的loading组件方法

监听spring加载完成后事件

有这个想法是在很早以前了，那时的我没有接触什么缓存技术，只知道hibernate有个二级缓存。没有用过memcache，也没有使用过redis。

只懂得将数据放到数组里或者集合里，一直不去销毁它（只有随着tomcat服务停止而销毁），用的时候从内存中读取就相当于缓存了，但是这么做有利也有弊。

好处：操作方便，随时取，随时存，只要方法封装好，代码也很清晰，易扩展。

弊端：因为只要一重启服务器，放在内存中的静态集合或静态数组肯定被回收了。导致一些重要的数据被干掉了。