不知道大家有没有遇到过这样的场景,页面里需要拿到用户的名字和性别渲染在canvas上面,首次进入的时候要在app.vue发异步请求去拿,页面里肯定就拿不到了,需要监听vuex里的userInfo的改变,发现获取到数据了,并且mounted钩子执行了,才能去渲染canvas,要监听两个状态都满足了才能去走下面的逻辑,但每个页面都这么去写显然太麻烦了。
于是就写了一个骚操作,可以注册任意的异步任务,满足条件即可自动执行对应的钩子,可以和原生钩子随意搭配使用,也可以单独使用,方便的一比,希望这个方案能帮到大家,好用的话回来告诉我哦。
github:github.com/1977474741/…
vue-custom-hooks 是什么?
- 一个可以定制vue组件钩子的东西,你可以注册全局的异步任务,满足条件时即可自动执行页面里相关的钩子。
- 支持和vue的原生钩子created,mounted等随意搭配使用。
- 支持传统h5、mpvue、uni-app
它有什么用?
解决业务页面里需要同时监听多个全局状态的问题
来点真实的场景吧
用户首次进入小程序需要在app.vue的onLaunch登录获取token和用户信息,然后存到store里。现在要做一个页面,进来把用户的头像昵称等渲染在canvas上,需求关键点在于两个条件都要满足。
方案1、在页面里监听store是否拿到了用户信息 && dom树渲染完毕。
//缺点:比较麻烦,耦合度高,用到的页面都要监听userinfo的改变和dom树渲染完毕,重复性代码多,不利于维护
data(){
return{
//任务完成数
num: 0
}
},
computed: {
userInfo: function(){
return this.$store.state.userInfo
},
watch:{
userInfo(newval,oldval){
//监听拿到用户信息了
if(newval.nickName){
this.num++;
if(this.num == 2){
//可以渲染canvas了
renderCanvas();
}
}
}
},
mounted(){
//dom渲染完毕
this.num++;
if(this.num == 2){
//可以渲染canvas了
renderCanvas();
}
}
方案2、在页面里去获取用户信息 && dom树渲染完毕。
//缺点:跟方案1差不多,用到的页面都要写获取用户信息的方法和监听dom树渲染完毕
data(){
return{
//任务完成数
num: 0
}
},
computed: {
userInfo: function(){
return this.$store.state.userInfo
},
methods:{
getUserInfo(cb){
//发起请求获取用户信息
let userinfo = {nickName:'张三'};
this.$store.commit('userinfo',userinfo);
cb()
}
},
created(){
this.getUserInfo(()=>{
this.num++;
if(this.num == 2){
//可以渲染canvas了
renderCanvas();
}
})
},
mounted(){
//dom渲染完毕
this.num++;
if(this.num == 2){
//可以渲染canvas了
renderCanvas();
}
},
使用vue-custom-hooks实现以上场景
//第一步,安装插件:
npm install vue-custom-hooks
//第二步,入口文件里注册插件:
import CustomHook from 'vue-custom-hooks';
Vue.use({
install(Vue) {
CustomHook.init(Vue,{
'UserInfo':{
name:'UserInfo',
watchKey: '$store.state.userinfo',
deep: true,
onUpdate(val){
//userinfo里含有nickName则表示命中此钩子
return !!val.nickName;
}
}
})
}
})
//第三步,业务页面里使用插件(任何页面都可以使用,耦合度低,重复性代码少):
onMountedUserInfo(){
//可以渲染canvas了
renderCanvas();
}
函数说明
-
CustomHook.init
import CustomHook from 'vue-custom-hooks';
CustomHook.init(Vue,diyHooks)
-
diyHooks对象说明
{
//1.注册属性监听钩子
//UserInfo,钩子单名,首字母大写
'UserInfo':{
//name,钩子全称,监听属性的话可以和上面的key一致,必填
name:'UserInfo',
//watchKey要监听的属性名,属性监听钩子模式必填
watchKey: '$store.state.userinfo',
//是否默认命中,非必填
hit: false,
//deep是否深度监听,非必填
deep: true,
//onUpdate属性改变时执行的callback,用来决定是否要命中此钩子,非必填,缺省值相当于返回了!!val
onUpdate(val){
//这里表示userinfo里含有nickName则命中此钩子。注意不可以异步return
return !!val.nickName;
}
},
//2.注册事件监听钩子
//BeforeMount,钩子单名,首字母大写
'BeforeMount':{
//name,原生钩子名,用来命中此钩子,必填
name:'beforeMount',
//destroy,相反的钩子名,用来取消命中,事件监听钩子必填
destroy:'destroyed',
//是否默认命中,非必填
hit: false
}
}
如何使用?
export default {
name: 'Home',
created(){
//数据初始化完成
},
mounted(){
//dom渲染完成
},
onCreatedUserInfo(){
//数据初始化完成 && 获取用户信息完成
},
onMountedUserInfo(){
//dom渲染完成 && 获取用户信息完成
}
}
钩子使用规则
`on{UserInfo}{BeforeMount}{Login}{Position}...` //所有注册好的钩子都可以随意搭配,排列顺序不影响钩子执行,都是 && 的关系
已经注册好的原生钩子
Launch、Created、Load、Attached、Show、Mounted、Ready
//如需其他的钩子可自行注册