-12-10 vue移动端卖座电影项目(十) 使用状态管理模式vuex的state控制选项卡tabb

文章目录

0.vuex复习1.引入2.在state中存showTabbar后,直接可以引用3.在Detail.vue的两个钩子函数中设置控制showTabbar的布尔值4.效果:实现进入详情页时隐藏tabbar5.为什么要使用mutation?6.使用mutation监听6.1.this.$mit()的第一个参数就是mutation的名字6.2.this.$mit()的第二个参数就是一个mutation如listentabbarShow(state,data)的第二个参数data

0.vuex复习

-11-19 vue笔记-vuex(一) vuex的安装和使用,vuex核心概念:State,Mutation,Action,Getter

1.引入

src/store/index.js

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {showTabbar:true},mutations: {},actions: {}})

main.js

import Vue from "vue"import router from "./router"import vueRouter from "vue-router"import App from "./App.vue"// 引入store下的index.jsimport store from './store/index'import '@/assets/iconfont/iconfont.css'Vue.use(vueRouter);Vue.config.productionTip = false;new Vue({el: "#app",router,store,render: h => h(App)})

2.在state中存showTabbar后,直接可以引用

App.vue

<tabbar v-show="this.$store.state.showTabbar"></tabbar>

3.在Detail.vue的两个钩子函数中设置控制showTabbar的布尔值

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;},

4.效果:实现进入详情页时隐藏tabbar

5.为什么要使用mutation?

vuex通过状态管理实现了与非父子通信一样的效果,

因为谁都可以调用和改动,可能会造成滥用,必须进行监管

6.使用mutation监听

6.1.this.$mit()的第一个参数就是mutation的名字

src/store/index.js

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {//自定义共享状态// showTabbar: true},mutations: {listentabbarShow() {console.log("修改成显示了...");},listentabbarHide() {console.log("修改成隐藏了...");},},actions: {}})

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);},

6.2.this.$mit()的第二个参数就是一个mutation如listentabbarShow(state,data)的第二个参数data

src/store/index.js

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {//自定义共享状态showTabbar: true},mutations: {//唯一修改状态的位置listentabbarShow(state, data) {state.showTabbar = data;},listentabbarHide(state, data) {state.showTabbar = data;}},actions: {}})

Detail.vue

beforeMount(){console.log("隐藏tabbar...");this.$mit('listentabbarHide',false);},mounted(){...},beforeDestroy(){console.log("显示tabbar...");this.$mit('listentabbarShow',true);},

-12-10 vue移动端卖座电影项目(十) 使用状态管理模式vuex的state控制选项卡tabbar的显隐 mutation的用法 this.$mit()的两个参数

如果觉得《-12-10 vue移动端卖座电影项目(十) 使用状态管理模式vuex的state控制选项卡tabb》对你有帮助，请点赞、收藏，并留下你的观点哦！