webpack + vue 实现 弹窗功能
对于刚入门webpack + vue 不久的新人来说，这技术，确实有些不太友好，相比较于直接操纵dom元素的jQuery，直接操纵数据的 vue 在webpack框架下实现多级弹窗的效果，要麻烦很多。
需求背景：点击地图撒点，会有一个回调函数返回数据，然后需要根据返回的数据打开弹窗，显示详细内容。
一开始我是设置了一些全局的变量和方法，通过全局方法获得回调函数返回的数据，然后再将此数据赋值给全局变量，以供所有页面使用。
但是这里有两个问题：
1.全局变量无法在Mustache（双花括号）和 vue指令 里面使用，即：
v-if="popCon.show" //控制弹窗显示和隐藏 popCon为popupController的缩写，此变量用来控制弹窗的显示隐藏
{{globalResult.name}} //使用回调函数返回的数据在弹窗中显示 globalResult为回调函数返回的数据，在页面中展示
2.即使通过在data中使用 中间变量 来赋值使用，但是当全局变量的更新时，本地变量无法同步
data: {
localCon: popCon,
localResult: globalResult
}
v-if="localCon.show"
{{localCon.name}} //这种情况，当 popCon 和 globalResult 发生变化时，localCon 和 localResult 无法同步
在无法绕开这两个问题的情况下，使用全局变量这种方式已经无法实现当前的需求。
所以，这里推荐使用 vuex 的全局变量来实现效果。
========================================
解决方案：
首先，在 vuex 的state中设置两个全局变量
const state = {
popCon: {
controller1: false, //第一个弹窗显示控制,可以通过给弹窗的 X ，添加点击事件，赋值，来关闭窗口
controller2: false //第二个弹窗显示控制
},
globalResult: { //此变量为回调函数返回的数据
name: "名称"
}
}
然后，在相应的弹窗组件中使用这两个全局变量来达到效果
v-if="$store.state.popCon.controller1" //显示效果，控制组件的显示效果，这里就不写组件的代码了
{{$store.state.globalResult.name}} //数据效果
现在这里都是默认的数据，然后需要在回调函数中给全局变量赋值
一般来说，我们都是直接给变量赋值，也就是 $store.state.globalResult = result
但是 vue 官方不推荐直接修改state的属性
推荐我们使用mutations来修改state的属性
function callback (result) {
vueObj.$store.commit('globalResult',result) //这里就不解释 vuex 的 mutations的写法了
vueObj.$store.commit('popCon',true) //设置弹窗显示为 true，打开弹窗 这里的 popCon 是 mutations里面的一个方法名为 popCon 的函数，上一行 globalResult 同理
}
到这里，就已经实现了 通过vuex 来达到打开弹窗详情界面的功能。
通过点击某个地方，获取数据，然后打开详情页面，显示数据内容，点击关闭按钮关闭弹窗
如果需要实现多级详情弹窗，可以在弹窗界面中嵌套使用。