vue-injection-helper 帮您处理依赖注入的问题
2009 年 4 月 12 日
https://www.npmjs.com/package/vue-injection-helper
我做了个针对 Vue3+ 的工具，叫做 vue-injection-helper
它有一些类型帮助的 api
但是最重要的还是三个 api —— defineModule , aggregateEvent 和 aggregateRef
首先，我们写一段组件代码，只包含 setup
setup(){
const name = ref('')
const password = ref('')
const changeName = (val:string)=> name.value = val
return {name,password}
}可以看到，这个 name 和 password，还有变更 name 的函数，我们只能在组件中访问
怎么让它的子孙组件也能访问呢？（注意是 ref，包含 get，set 操作）
我们用 defineModule :
setup(){
const name = ref('')
const password = ref('')
const changeName = (val:string)=> name.value = val
const service = {name, password, changeName}
defineModule(service, 'profile-token')
return service
}好了，子孙组件都能访问 name 和 password 了：
setup(){
const profileService = {
name: aggregateRef('profile-token',['name','value'], ''),
changeName: aggregateEvent('profile-token',['changeName'])
}
return {profileService}
}为什么要用 aggregateRef 和 aggregateEvent 包裹呢？
为了帮你处理类型问题，变注入为声明，如果注入未生效，那么直接用默认值新建的 ref 作为数据返回给你 （event 默认为 ()=>{}），这样，你的组件就能不通过 props 传递响应式数据的情况下，还能独立变化
而且，注意到，你还可以继续向下传递，以及组合其它的 module
setup(){
const profileService = {
name: aggregateRef('profile-token',['name','value'], ''),
changeName: aggregateEvent('profile-token',['changeName'])
}
defineModule(service,'child-token')
return {profileService}
}为什么不用 reactive ?
因为 reactive 一旦经过 computed，就会变成 ref，所以无法做到层层传递，因此只用 ref
希望大家喜欢，如果能够帮助到大家，不胜荣幸
About The Author
