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

文章目录

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

0.vuex复习

2021-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.js
import 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.$store.commit()的第一个参数就是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.$store.commit('listentabbarHide',false);},mounted(){...},beforeDestroy(){console.log("显示tabbar...");// Eventbus.$emit('xianshi',true);// this.$store.state.showTabbar=true;this.$store.commit('listentabbarShow',true);},

6.2.this.$store.commit()的第二个参数就是一个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.$store.commit('listentabbarHide',false);},mounted(){...},beforeDestroy(){console.log("显示tabbar...");this.$store.commit('listentabbarShow',true);},

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

2021-12-14 vue移动端卖座电影项目(十二) 使用mapState控制封装选项卡tabbar的显隐,以及回顾使用中央事件总线eventbus和vuex的state控制tabbar显隐的异同
文章目录 0.实现场景:进入详情页时,底部选项卡隐藏 1.使用中央事件总线控制tabbar的v-show的值 2.使用vuex的state控制tabbar的v-show的值 3.使用vuex的muta ...
2021-12-22 vue移动端卖座电影项目(十五) 如何将项目上传到远程仓库
文章目录 0.git的介绍,官网,下载和安装介绍官网和下载地址和安装 2.git的使用命令 2.1.本地 2.2.上传到在线仓库:github,gitee等 2.3.下载 2.4.分支 3.上传v ...
2021-11-27 vue移动端卖座电影项目(二) 封装选项卡,引入iconfont,nowPlaying获取数据后写样式
文章目录 1.封装选项卡 2.设置iconfont 3.nowPlaying获取数据后写样式 3.1.获取后台数据 3.2.从data对象获取电影海报,标题,评分 3.3.过滤data.actor,获 ...
2022-11-17 vue移动端卖座电影项目(一) 获取后台数据
0.目标网页卖座电影 1.获取url数据位置:网络>复制>复制链接地址 2.获取电影列表数据字段获取:网络>标头>请求标头> 3.代码 views/nowPlayi ...
2021-12-11 vue移动端卖座电影项目(十一) comingSoon用后台获取的数据写样式,以及用vuex的Action处理异步问题:切换FilmHeader中的两个标签时直接缓存数据
文章目录 0.vuex工作流程图复习 1.思路 2.axios获取后台数据(仿nowPlaying页即可) 3.用vuex的Action处理异步问题:切换FilmHeader中的"正在热映& ...
2021-12-09 vue移动端卖座电影项目(九) 使用事件总线EvenetBus控制选项卡tabbar的显隐(进入入详情页时隐藏)
文章目录 0.事件总线复习 1.显隐逻辑 2.Detail.vue和它要控制的tabbar.vue不是父子关系 3.使用中央事件总线来控制 4.效果 0.事件总线复习 2021-10-21 vue笔记 ...
2021-12-16 vue移动端卖座电影项目(十三) 使用vuex的getter筛选comingSoon的显示电影数
1.Getter:把Store中数据处理形成新数据 Getter 可以对 Store 中已有的数据加工处理之后形成新的数据,类似 Vue 中的计算属性. Store 中数据发生变化,Getter 的数 ...
2021-11-30 vue移动端卖座电影项目(四) 当前项目代码
文章目录 0.目录和package.json依赖 1.src/assets/iconfont(文件夹) 2.src/components/tabbar.vue 3.router/index.js 4. ...
2021-11-29 vue移动端卖座电影项目(三) vue项目中使用Swiper插件,Film页面设置轮拨图,nowPlaying页面设置样式
文章目录 1.引入swiper.vue组件目的步骤结果 2.把swiper-slide做成匿名插槽 3.Film.vue中通过axios请求获取后台轮播图片目的步骤因为现在原网站已取消轮拨 ...

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

文章目录

0.vuex复习

1.引入

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

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

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

5.为什么要使用mutation?

6.使用mutation监听

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

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

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

最新文章

热门文章