一，组件传参
在实际开发中我们会遇到各种各样的场景，而跨组件传参无疑是经常遇到的，而跨组件传参监听同样是我们开发中可能遇到的情况，以下我使用一种不适应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()