vue2组件中方法的彼此调用

在合作开发时，我们经常会遇到组件通信的问题。 1.png

如图所示，左侧查询组件A是老王负责，球体交互组件B是小张负责。当点击左侧A组件选择图形时，会唤起球体组件B封装的绘制函数，最终A获取到绘制完成后的经纬度坐标参数。
如果这两个组件之间并不是父子，也不是兄弟组件，如何实现呢？
一般常用手段无非两种，EventBus和vuex。既然要管理状态，还要实现方法的彼此调用，常用的还是vuex。

定义store

export default {
    state: {
        positions: null,
        shape: ''
    },
    mutations: {
        
        drawShape(state,data){//选择图形
            state.shape = data;
        },
        getShapePositions(state,data){ //获取坐标
            console.log('获取参数>>>',data);
            state.positions = data;
        }
    },
    actions: {}
}

其实vuex就是个命令模式。命令模式的意思就是，不直接修改变量，而是统一通过方法来修改，这样的好处是容易追踪。比如你修改了某个变量，一定是唤起了某个函数来改变的，全局搜一下这个函数名，就可以知道什么时候在哪里修改了变量。
因此，通常定义一个state变量，相应的也要定义一个方法，这二者应该是一对一的配套关系。
我们需要知道绘制什么图形？绘制完成后的坐标是什么？因此定义了两个state。
而这两个state，需要分别定义函数来改变各自的状态。

交互

组件A：

this.$store.commit('drawShape','');//先置空
//调用Globe组件的方法
this.$store.commit('drawShape',p.img);

在组件A调用mutations中定义的drawShape方法，改变了state中的shape的状态。这个变化，需要在组件B中监听。
监听state的话，需要在组件内先定义一个计算属性，返回值就是state，然后监听这个计算属性即可。
组件B：

    computed:{
        shape(){
            
            return this.$store.state.drawShape.shape;
        }
    },
    watch:{
        shape:{
            handler(val,oldVal){
                
                console.log(val,oldVal);
                if(val && val !== oldVal){
                    this.createShape(val);//调用组件B自己的绘制函数
                    
                } else {
                    
                    this.destroyHandler();
                }
                    
            },
            deep:true,
            immediate:true
            
        }

    },

当组件B绘制完成后，需要将坐标参数传递出去。

this.$store.commit('getShapePositions',newObj);//更新坐标

A组件通过获取state中的positions参数，即可拿到绘制后的坐标。