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参数，即可拿到绘制后的坐标。
