文章目录
0.实现场景:进入详情页时,底部选项卡隐藏1.使用中央事件总线控制tabbar的v-show的值2.使用vuex的state控制tabbar的v-show的值3.使用vuex的mutation控制tabbar的v-show的值4.使用mapState控制tabbar的v-show的值4.1.v-show="isShow"4.2.引入mapState,并在计算属性中使用它,得到同样效果:`computed:mapState(["showTabbar"]),`5.`...mapState(["showTabbar"])`5.1.使用扩展运算符,让计算属性可以继续绑定新成员5.2.ES6扩展运算符(三个点)复习6.ES6的按需导入:`import {mapState} from "vuex"`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" // 导入组件tabbarimport Eventbus from "./eventbus" // 导入Eventbusexport default {name: "App",data(){return{showTabbar:true//初始化showTabbar}},components: {tabbar,//注册tabbar组件},mounted(){Eventbus.$on('xianshi',(data)=>{this.showTabbar=data;//这个data就是Eventbus.$emit的第二个参数(布尔值)})}}; </script>...
Detail.vue
import Eventbus from "../eventbus"export default {beforeMount(){console.log("隐藏tabbar...");Eventbus.$emit('xianshi',false);},mounted(){...},beforeDestroy(){console.log("显示tabbar...");Eventbus.$emit('xianshi',true);}, }
2.使用vuex的state控制tabbar的v-show的值
在store/index.js的state中声明showTabbar, 让选项卡占位符的v-show的值为showTabbar, 然后在需要的时候(进入和离开详情页时)修改它的值
store/index.js
state: {//自定义共享状态showTabbar: true,},
App.vue
<!-- 把选项卡中的电影,个人中心等封装到单独组件tabbar中 --><tabbar v-show="this.$store.state.showTabbar"></tabbar>
showTabbar不用在data中再初始化一遍了
Detail.vue
beforeMount(){console.log("隐藏tabbar...");// Eventbus.$emit('xianshi',false);this.$store.state.showTabbar=false;},mounted(){...},beforeDestroy(){console.log("显示tabbar...");// Eventbus.$emit('xianshi',true);this.$store.state.showTabbar=true;},
因为state中的值可以随意被修改,引入mutation,对修改操作进行监听
3.使用vuex的mutation控制tabbar的v-show的值
this.$mit的两个参数分别是mutation的名称和mutation的第二个参数
App.vue
<!-- 把选项卡中的电影,个人中心等封装到单独组件tabbar中 --><tabbar v-show="this.$store.state.showTabbar"></tabbar>
store/index.js
state: {//自定义共享状态showTabbar: true,},mutations: {//唯一修改状态的位置listentabbarShow(state, data) {state.showTabbar = data;},listentabbarHide(state, data) {state.showTabbar = data;},}
Detail.vue
beforeMount(){console.log("隐藏tabbar...");// Eventbus.$emit('xianshi',false);// this.$store.state.showTabbar=false;this.$mit('listentabbarHide',false);},mounted(){...},beforeDestroy(){console.log("显示tabbar...");// Eventbus.$emit('xianshi',true);// this.$store.state.showTabbar=true;this.$mit('listentabbarShow',true);},
4.使用mapState控制tabbar的v-show的值
4.1.v-show=“isShow”
别的不变,把v-show="this.$store.state.showTabbar"替换成v-show=“isShow”
computed:{isShow(){return this.$store.state.showTabbar;}},
效果不变
4.2.引入mapState,并在计算属性中使用它,得到同样效果:computed:mapState(["showTabbar"]),
App.vue
<template><div class="wrapper"><!-- 把选项卡中的电影,个人中心等封装到单独组件tabbar中 -->-><tabbar v-show="showTabbar"></tabbar><router-view></router-view></div></template><script>import tabbar from "./components/tabbar"// 导入组件tabbarimport {mapState} from "vuex"//按需导入export default {name: "App",components: {tabbar,},computed:mapState(["showTabbar"]),}; </script>
缺点是计算属性computed被此对象占据,不能再写入新值
5....mapState(["showTabbar"])
5.1.使用扩展运算符,让计算属性可以继续绑定新成员
computed:{...vuex.mapState(["showTabbar"]),},
实际上就是state导入的两种方法中的另外一种,同理,还有mapMutation,mapGetter等等
-11-19 vue笔记-vuex(一) vuex的安装和使用,vuex核心概念:State,Mutation,Action,Getter
5.2.ES6扩展运算符(三个点)复习
-04-26 [ES6]拓展运算符的几种用法
6.ES6的按需导入:import {mapState} from "vuex"
如果确定只需要模块的某个功能,不用导入全部模块的上千个方法,而是选择性的导入,
上例中的
import {mapState} from "vuex"export default {computed:{...mapState(["showTabbar"]),},}
等价于
import vuex from "vuex"export default {computed:{...vuex.mapState(["showTabbar"]),},}
没有全部引入vuex,也达到了一样的效果,提高了性能
-12-14 vue移动端卖座电影项目(十二) 使用mapState控制封装选项卡tabbar的显隐 以及回顾使用中央事件总线eventbus和vuex的state控制tabbar显隐的异同
如果觉得《-12-14 vue移动端卖座电影项目(十二) 使用mapState控制封装选项卡tabbar的显隐》对你有帮助，请点赞、收藏，并留下你的观点哦！
