Vue架构自定义Hooks钩子库spa-custom-hooks

前言

spa-custom-hooks 是公司同事根据平时业务痛点基于Vue的架构开发的一个自定义Hooks页面钩子，在我们开发C端产品时个别页面依赖用户信息或者其他异步接口数据状态而需要执行不同的业务逻辑，开始我们一般都把逻辑判断状态都放在Vue自带的生命钩子中例如created，mounted或者小程序的onShow，onLoad等等，但是这样的写法十分笨重而且当页面依赖的公共异步数据需要修改逻辑时，就会十分恼火，特别是页面多的情况，基于这种情况就有了spa-custom-hooks ，用简单优雅的方式解决页面逻辑依赖全局异步数据的问题

spa-custom-hooks是什么

一个可以定制页面钩子的东西，你可以注册全局的异步任务，自己定义钩子的触发条件，满足条件时即可自动执行页面里相关的钩子。支持和vue的原生钩子created，mounted等随意搭配使用。支持vue架构（包括uni-app、wepy、mpvue等）以及各种小程序。

如何使用spa-custom-hooks自定义自己的钩子

npm安装spa-custom-hooks

npm install spa-custom-hooks

入口文件注册插件

import CustomHook from 'spa-custom-hooks';
import store from './store'
const diyHooks = {
    // 注册属性的监听钩子名称
    'UserInfo': {
        // 钩子全称，必填
        name: 'UserInfo',
        // watchKey负责监听
        watchKey: 'userinfo',
        deep: true,
        onUpdate(val) {
            return !!val.nickName
        }
    }
}

Vue.use(CustomHook, diyHooks, store)

页面中使用：

export default {
	name: 'Home',
	onUserInfo(){
            ....
	},
	mounted(){
		this.$store.commit('logs','mounted钩子执行(home.vue)');
	},
	
	onCreatedUserInfo(){
		this.$store.commit('logs','onCreatedUserInfo钩子执行(home.vue)');
	},
}

自定义钩子除了直接使用onUserInfo触发还可以和原生钩子onCreated结合一起使用复合钩子，满足钩子所有触发条件才会触发，比如上面自定义钩子用户登录信息UserInfo的触发条件是是否存在nickName。