一，组件传参
在实际开发中我们会遇到各种各样的场景，而跨组件传参无疑是经常遇到的，而跨组件传参监听同样是我们开发中可能遇到的情况，以下我使用一种不适应vuex的监听组件传参的方法。
二，具体实现
使用个人类替代vuex的想法如下：
1，组件之间可相互调用
2，可以通过参数监听驱动函数执行
首先，我们先声明一个类，ParamsMit
class ParamsMit{
static GetInstance(){
if(!this.Instance){
this.Instance = new ParamsMit()
}
return this.Instance
}
}
在这个类中我们使用静态方法GetInstance，使其形成一个单例模式。
接着我们在类中加入模块注册的方法：
/**
*
* 模块注册，若需要声明式参数，可以另至一个常量模块在静态方法GetInstance实例化类阶段将模块数据循环注册
* @param {*} name name为模块的名称，必须为字符串如果非字符串则报错，如果已有注册模块则报错
* @param {*} obj obj为模块对象参数对象内字段可为类型也可为具体值
*
*/
register(name,obj){
if(typeof name === 'string'){
if(this.name){
throw new Error(`${name}该模块已注册`)
}else{
this[name] = {}
if(typeof obj === 'object'){
for(let i in obj){
Object.assign(this[name],{[i]:this.filter(obj[i]) ? new obj[i] : obj[i]})
}
}
}
}else{
throw new Error(`${name}参数应为字符串`)
}
}
模块注册的方法使我们的数据可以基于中介模块存储，为什么要基于模块存储？具体有如下原因：
1，在实际中，我们面临各种各样的组件会在不同的模块中存在相同的字段，为了应对这样较为频繁的业务场景，我选择基于模块存储；
2，基于模块存储便于我们使用Proxy进行对应数据的监听；
模块注册的使用方法如下：
let Mit = ParamsMit.GetInstance()
//注册menu模块
Mit.register('menu')
如上便是模块的注册，当然，我们会考虑，如果我们的项目足够复杂，那么如果我们将模块全部注册在项目中当然会导致项目不便于管理，所以为了解决如下问题，我们可以单独使用一个常量，来作为模块的声明，在GetInstance中将需要声明的模块通过注册机制注册即可。
在完成模块注册之后，我们实际上已经可以实现参数的跨组件存取了，但是，我们在实际业务中可能会遇到监听数据更改状态的问题，那么我们还需要声明接下来的watch方法。
/**
* 模型参数监听
* @param {*} res res为对象详细参数如下
* {
* demo:FUNC(原对象,新对象,设定的key值)，
* demo.add:FUNC(旧参数,新参数,设定的key值,原对象)，
* 对象参数中接受2种传参格式，一种如demo为模块全局监听，另一种为demo.add为监听某个单一字段
* }
*/
watch(res){
let module = []
let handle = (i,arg)=>{
if(module.findIndex(item=>arg ==='whole' ? item.name === i : item.name === arg[0]) === -1){
module.push({name:arg ==='whole' ? i : arg[0],handle:{}})
}
let obj = arg ==='whole' ? {whole:res[i]} : {[arg[1]]:res[i]}
let data = module.find(item=> arg ==='whole' ? item.name === i : item.name === arg[0])
arg ==='whole' ? Object.assign(data,obj) : Object.assign(data.handle,obj)
}
for(let i in res){
let arr = i.indexOf('.') !== -1 ? i.split('.') : []
arr.length > 1 ? handle(i,arr) : handle(i,'whole')
}
module.forEach(item=>{
if(!this[item.name]){ this.register(item.name) }
this[item.name] = new Proxy(this[item.name],{
set:(target,key,value)=>{
if(item.whole){
item.whole(target,value,key)
}
if(item.handle[key]){
item.handle[key](target[key],value,key,target)
target[key] = value
}
return this
}
})
})
}
在watch方法中我们通过Proxy代理实现整个模块的状态驱动或者部分字段的状态驱动。
watch的实际应用如下：
Mit.watch({
menu:(res,target)=>{
//具体的执行代码
console.log(res,target)
}
})
实际中，我们可以将我们的ParamsMit类通过install之后使用Vue.use即可，这样在实际应用中使用this指向实例即可。
整类的代码如下：
class ParamsMit{
static GetInstance(){
if(!this.Instance){
this.Instance = new ParamsMit()
}
return this.Instance
}
/**
*
* 模块注册，若需要声明式参数，可以另至一个常量模块在静态方法GetInstance实例化类阶段将模块数据循环注册
* @param {*} name name为模块的名称，必须为字符串如果非字符串则报错，如果已有注册模块则报错
* @param {*} obj obj为模块对象参数对象内字段可为类型也可为具体值
*
*/
register(name,obj){
if(typeof name === 'string'){
if(this.name){
throw new Error(`${name}该模块已注册`)
}else{
this[name] = {}
if(typeof obj === 'object'){
for(let i in obj){
Object.assign(this[name],{
[i]:this.filter(obj[i]) ? new obj[i] : obj[i]
})
}
}
}
}else{
throw new Error(`${name}参数应为字符串`)
}
}
/**
* 模型参数监听
* @param {*} res res为对象详细参数如下
* {
* demo:FUNC(原对象,新对象,设定的key值)，
* demo.add:FUNC(旧参数,新参数,设定的key值,原对象)，
* 对象参数中接受2种传参格式，一种如demo为模块全局监听，另一种为demo.add为监听某个单一字段
* }
*/
watch(res){
let module = []
let handle = (i,arg)=>{
if(module.findIndex(item=>arg ==='whole' ? item.name === i : item.name === arg[0]) === -1){
module.push({name:arg ==='whole' ? i : arg[0],handle:{}})
}
let obj = arg ==='whole' ? {whole:res[i]} : {[arg[1]]:res[i]}
let data = module.find(item=> arg ==='whole' ? item.name === i : item.name === arg[0])
arg ==='whole' ? Object.assign(data,obj) : Object.assign(data.handle,obj)
}
for(let i in res){
let arr = i.indexOf('.') !== -1 ? i.split('.') : []
arr.length > 1 ? handle(i,arr) : handle(i,'whole')
}
module.forEach(item=>{
if(!this[item.name]){ this.register(item.name) }
this[item.name] = new Proxy(this[item.name],{
set:(target,key,value)=>{
if(item.whole){
item.whole(target,value,key)
}
if(item.handle[key]){
item.handle[key](target[key],value,key,target)
target[key] = value
}
return this
}
})
})
}
/**
*
* @param {*} type 过滤参数判断，若是类型则new出来
*/
filter(type){
let arr = [String,Object,Array,Number,Boolean]
if(arr.indexOf(type) !== -1){
return true
}else{
return false
}
}
}
export default ParamsMit.GetInstance()
网友评论