如圖所示，左側(cè)查詢組件A是老王負責(zé)，球體交互組件B是小張負責(zé)。當(dāng)點擊左側(cè)A組件選擇圖形時，會喚起球體組件B封裝的繪制函數(shù)，最終A獲取到繪制完成后的經(jīng)緯度坐標(biāo)參數(shù)。
如果這兩個組件之間并不是父子，也不是兄弟組件，如何實現(xiàn)呢？
一般常用手段無非兩種，EventBus和vuex。既然要管理狀態(tài)，還要實現(xiàn)方法的彼此調(diào)用，常用的還是vuex。
定義store
export default {
state: {
positions: null,
shape: ''
},
mutations: {
drawShape(state,data){//選擇圖形
state.shape = data;
},
getShapePositions(state,data){ //獲取坐標(biāo)
console.log('獲取參數(shù)>>>',data);
state.positions = data;
}
},
actions: {}
}
其實vuex就是個命令模式。命令模式的意思就是，不直接修改變量，而是統(tǒng)一通過方法來修改，這樣的好處是容易追蹤。比如你修改了某個變量，一定是喚起了某個函數(shù)來改變的，全局搜一下這個函數(shù)名，就可以知道什么時候在哪里修改了變量。
因此，通常定義一個state變量，相應(yīng)的也要定義一個方法，這二者應(yīng)該是一對一的配套關(guān)系。
我們需要知道繪制什么圖形？繪制完成后的坐標(biāo)是什么？因此定義了兩個state。
而這兩個state，需要分別定義函數(shù)來改變各自的狀態(tài)。
交互
組件A：
this.$store.commit('drawShape','');//先置空
//調(diào)用Globe組件的方法
this.$store.commit('drawShape',p.img);
在組件A調(diào)用mutations中定義的drawShape方法，改變了state中的shape的狀態(tài)。這個變化，需要在組件B中監(jiān)聽。
監(jiān)聽state的話，需要在組件內(nèi)先定義一個計算屬性，返回值就是state，然后監(jiān)聽這個計算屬性即可。
組件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);//調(diào)用組件B自己的繪制函數(shù)
} else {
this.destroyHandler();
}
},
deep:true,
immediate:true
}
},
當(dāng)組件B繪制完成后，需要將坐標(biāo)參數(shù)傳遞出去。
this.$store.commit('getShapePositions',newObj);//更新坐標(biāo)
A組件通過獲取state中的positions參數(shù)，即可拿到繪制后的坐標(biāo)。
