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

本节讲解的重点 modal数值的传递！！
我们先让第二个btn能打开modal的效果的，操作步骤能第一个是一样的，这里省略。。。

• vuex.vue的文件

 <button class="second-modal" @click="secondClick">点击btn传数据到modal上面去</button>

//js

data(){
    return {
        show:'我是页面上面传递过来的数据'
    }
},
methods:{
    secondClick(){
      this.$store.dispatch('toggleModal', {
        name: 'secondmodal',  //这个modal的name
        status: true,
        data:this.show, // 传递数据的操作
      })
    }
}

• second.modal.vue

<template>
  <transition name="modal">
      <div @click="close" class="modal-mask"> <!--阻止冒泡的，非modal区域点击关闭-->
        <div class="modal-outter">
          <div class="modal-wrapper">
            <div class="modal-container"  @click.stop> <!--阻止冒泡的，modal区域点击不关闭-->
              <div class="modal-body">
                显示的数据：{{data}}
                <br>
                <button class="bt" @click="test()">关闭</button>
              </div>
            </div>

          </div>
        </div>

      </div>

  </transition>
</template>
<script>
  import {
    mapState,
    mapGetters,
    mapActions,
    mapMutations,
  } from 'vuex';

  export default {
    name: 'firstmodal',
    data() {
      return {};
    },
    computed: {
      ...mapState({
        data: state => state.modal.data || {},  //页面传过来的数据
        callback: state => state.modal.callback,
      }),
      ...mapGetters([]),
    },
    methods: {
      close() {
        this.$store.commit('closeModal');
      },
      test() {
        this.close()
        this.callback && this.callback();
      },
    },
    mounted() {},
  };
</script>

注：这里讲解是view->modal的操作，modal->view的操作是一样的