Vue-custom-hooks NPM

What is vue-custom-hooks?

A thing that can customize vue component hooks. You can register global asynchronous tasks and automatically execute related hooks in the page when the conditions are met.
Supports the use of created, mounted, etc. with vue's native hooks.
Support traditional h5、uni-app、wepy、mpvue

What is it for?

Solve the problem of needing to monitor multiple global states at the same time in the business page

Let’s have some real scenes

To enter the Mini Program for the first time, users need to log in onLaunch of app.vue to obtain the token and user information, and then save it in the store. Now we are going to make a page, come in and render the user's avatar, nickname, etc. on the canvas. The key point is that the two conditions must be met.

Scheme 1. Monitor on the page whether the store has received user information && dom tree rendering is complete.

//Disadvantages: more troublesome, high coupling, the pages used have to monitor the changes of userinfo and the rendering of the dom tree, there are many repetitive codes, which is not conducive to maintenance
data(){
    return{
        //Number of tasks completed
        num: 0
    }
},
computed: {
    userInfo: function(){
        return this.$store.state.userInfo
},
watch:{
    userInfo(newval,oldval){
        //Listen to get user information
        if(newval.nickName){
            this.num++;
            if(this.num == 2){
                //Can render the canvas
                renderCanvas();
            }
        }
    }
},
mounted(){
    //dom rendering completed
    this.num++;
    if(this.num == 2){
        //Can render the canvas
        renderCanvas();
    }
}

Solution 2. Get user information on the page && dom tree rendering is complete.

//Disadvantages: similar to solution 1, the pages used have to write methods for obtaining user information and monitor the rendering of the dom tree
data(){
    return{
        //Number of tasks completed
        num: 0
    }
},
computed: {
    userInfo: function(){
        return this.$store.state.userInfo
},
methods:{
    getUserInfo(cb){
        //Initiate a request to obtain user information
        let userinfo = {nickName:'Zhang San'};
        this.$store.commit('userinfo',userinfo);
        cb()
    }
},
created(){
    this.getUserInfo(()=>{
        this.num++;
        if(this.num == 2){
            //Can render the canvas
            renderCanvas();
        }
    })
},
mounted(){
    //dom rendering completed
    this.num++;
    if(this.num == 2){
        //Can render the canvas
        renderCanvas();
    }
},

Use vue-custom-hooks to achieve the above scenarios

//The first step is to install the plug-in:
npm install vue-custom-hooks

//The second step is to register the plug-in in the entry file:
import CustomHook from 'vue-custom-hooks';
Vue.use(CustomHook ,{
     'UserInfo':{
        name:'UserInfo',
        watchKey: 'userinfo',
        deep: true,
        onUpdate(val){
            //userinfo里含有nickName则表示命中此钩子
            return !!val.nickName;
        }
    }
},store)

//The third step is to use plug-ins in business pages (any page can be used, with low coupling and less repetitive code):
onMountedUserInfo(){
    //Can render the canvas
    renderCanvas();
}

Registration parameter description

import store from './store'
import CustomHook from'vue-custom-hooks';
Vue.use(CustomHook,diyHooks,store)

diyHooks object description

{
    //1. Register the attribute monitoring hook
    //UserInfo, the single name of the hook, the first letter is capitalized
    'UserInfo':{
        //name, the full name of the hook, it can be the same as the key above if the monitoring attribute is required, it is required
        name:'UserInfo',
        //The property name in the store to be monitored by watchkey (equivalent to $store.state.userinfo), the attribute monitoring hook mode is required
        watchKey:'userinfo',
        //Whether to hit by default, not required
        hit: false,
        //deep Whether to monitor in depth, not required
        deep: true,
        //The callback executed when the onUpdate property is changed is used to determine whether to hit this hook. It is not required. The default value is equivalent to returning!! val
        onUpdate(val){
            //This means that userinfo contains nickName and hits this hook. Note that you cannot return asynchronously
            return !!val.nickName;
        }
    },
    
    //2. Register event listener hook
    //BeforeMount, hook single name, first letter capitalized
    'BeforeMount':{
        //name, the name of the native hook, used to hit this hook, required
        name:'beforeMount',
        //destroy, the opposite hook name, used to cancel the hit, the event listener hook is required
        destroy:'destroyed',
        //Whether to hit by default, not required
        hit: false
    }
}

How to use?

export default {
    name:'Home',
    created(){
        //Page initialization is complete
    },
    mounted(){
        //dom rendering completed
    },
    onLoginCreated(){
        //Successful login (get the token) && page initialization completed
        //Tips: Suitable for scenarios where the request sent by a page depends on the token
    },
    onCreatedUserInfo(){
        //Page initialization is complete && Obtaining user information is complete
        //Tips: Suitable for scenarios where user information needs to be used to make judgments when the page is initialized, and then go to the page logic
    },
    onMountedUserInfo(){
        //dom rendering completed && access user information completed
        //Tips: Suitable for similar scenes where the avatar needs to be rendered on canvas when entering the page for the first time
    },
    onReadyShow(){
        //dom rendering completed && page display
        //Tips: Suitable for scenarios where components or dom need to be obtained and executed every time the page is displayed
    }
}

Hook usage rules

`on{UserInfo}{BeforeMount}{Login}{Position}...` //All registered hooks can be matched at will, the arrangement order does not affect the execution of the hooks, they are all in && relationship

Registered native hooks

Launch, Created, Load, Attached, Show, Mounted, Ready
//↓↓↓If you need other hooks, you can register by yourself↓↓↓(If a hook of the current framework and its corresponding opposite hook are inconsistent with the following configuration, you also need to manually register, for example, wepy has created but not destroyed)