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>