关于vue的store状态变化和组件内生命周期相关问题最优雅的解决方案

2,108 阅读3分钟

异步拿到用户信息 && 页面内mounted执行 == 渲染canvas

不知道大家有没有遇到过这样的场景,页面里需要拿到用户的名字和性别渲染在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}...` //所有注册好的钩子都可以随意搭配,排列顺序不影响钩子执行,都是 && 的关系

已经注册好的原生钩子

LaunchCreatedLoadAttachedShowMountedReady
//如需其他的钩子可自行注册

Demo二维码

left image description here