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

本文介绍了在Vue移动端卖座电影项目中，如何在进入详情页时隐藏底部选项卡。通过中央事件总线(eventbus)、vuex的state和mutation以及mapState来控制tabbar的v-show值。特别地，使用mapState可以在计算属性中简洁地实现tabbar的显示控制。同时，文章还提到了ES6的扩展运算符在按需导入中的应用，以提高性能。

文章目录

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