2021-12-14 vue移动端卖座电影项目(十二) 使用mapState控制封装选项卡tabbar的显隐,以及回顾使用中央事件总线eventbus和vuex的state控制tabbar显隐的异同

0.实现场景:进入详情页时,底部选项卡隐藏

1.使用中央事件总线控制tabbar的v-show的值

在App.vue中Eventbus.$on(),在Detail.vue中Eventbus.$emit(),两者的第一个参数"xianshi"要保持一致
src/eventbus.js

import Vue from "vue"
export default new Vue();

App.vue

<template>
  <div class="wrapper">
    <!-- 把选项卡中的电影,个人中心等封装到单独组件tabbar中 -->
    <tabbar v-show="showTabbar"></tabbar>
    <router-view></router-view>
  </div>
</template>
<script>
  import tabbar from "./components/tabbar" // 导入组件tabbar
  import Eventbus from "./eventbus" // 导入Eventbus
   export default {
     
      name: "App",
      data(){
     
        return{
     
          showTabbar:true//初始化showTabbar
        }
      },
      components: {
     
          tabbar,//注册tabbar组件
      },
      mounted(){
     
        Eventbus.$on('xianshi',(data)=>{
     
          this.show