vuex - modal的实现 =>从入门到放弃（三）

本节讲点的重点是modal的回调函数

参照（一）的方法吧three.modal.vue弹出的功能实现的

基本的操作介绍：点击第三按钮，弹出modal，然后点击modal里面的按钮，执行一次的回调事件（本例子回调 页面count的 +1 操作）

three.modal.vue

<template>
<div id="vuex">
<button class="first-modal" @click="firstClick">打开modal</button>
<button class="second-modal" @click="secondClick">点击btn传数据到modal上面去</button>
<button class="three-modal" @click="threeClick">回调函数</button>
<h1 class="h1">{{count}}</h1>
</div>
</template>
<script>
export default {
name: 'vuexdemo',
data(){
return {
show:'我是页面传递过来的数据',
count:1,
}
},
methods: {
add(){
this.count++;
},
firstClick(){
this.$store.dispatch('toggleModal', {
name: 'firstmodal',
status: true
})
},
secondClick(){
this.$store.dispatch('toggleModal', {
name: 'secondmodal',
status: true,
data:this.show,
})
},
threeClick(){
this.$store.dispatch('toggleModal', {
name: 'threemodal',
status: true,
callback:this.add(),  //页面的回调操作
})
}
}
}
</script>