Vue听课笔记（Vue2~Vue3）-5

影院组件

更改滚动条范围：
动态结算高度

//动态结算高度
this.height = document.documentElement.clientHeight-选项卡高度
this.height = document.documentElement.clientHeight- document.querySelector('footer').offsetHeight + 'px'

组件库elementUI

• 组件网址

组件渲染：

sideList" :key="data.id">
<el-submenu index="1" v-for="data in
<template slot="title"
><i class="el-icon-message"></i>导航一</template
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>

• 改为字符串：
  • 加一个" "

数据懒加载

每次检测到到底，触发函数获取数据

因为上面这个元素会导致第一次就立即触发到底的效果

List组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将loading设置成false 即可。若数据已全部加载完毕，则直接将finished 设置成 true 即可。

取数据：

this.current++
http({
url: /gateway?cityId=440100&pageNum=${this.current}&pageSize=10&
type=1&k=5196770,
headers: {
'X-Host':'mall.film-ticket.film.list'
}
}).then((res)=>{
// console.log(res.data.data.films)
this.datalist = res.data.data.films
}）

如果到底了，就停止

if (this.datalist.length=this.total//后端数据的总长度 ）{
this.finished = true
return}

loading加载&axios拦截

加载：

Toast.loading({
message：'加载中.….'，
forbidclick: true
})

是方法 ，需要单独引入

duration展示时长（ms），值为0时，toast不会消失
默认2000

//在成功后拦截--hideloading
http.interceptors.response.use(function (response){
// Any status code that lie within the range of 2xx cause this function to
	//trigger
// Do something with response data

city数据组件

this.$router.push('/city')

点击事件实现跳转
实现原理

1. 316条==>A，B进行分组
2. 利用转换后的数组，结合组件库进行渲染页面。

过滤：

console.log(letterList)
//
letterList.forEach(Letter => {
var newList = list.filter(item => item.pinyin.substring(0, 1).
toUpperCase() === letter)
console.log(newList)
}）

Vuex

Vuex是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化.

//新创建一个store文件夹，其中放入带有vuex的index.js的文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
	//state公共状态，传入公共数据
	state:{
		
	},
	//统一管理，被devtools 记录状态的修改
	//只能支持同步
	//是对状态的追踪，而非改变
	//改变状态在methods中进行
	mutations:{
	
	},
	//Action 类似于 mutation，不同在于：
	//Action 提交的是 mutation，而不是直接变更状态。
	//Action 可以包含任意异步操作。
	actions:{

	}

})

• 可以用辅助函数来减少重复的this.$store.—
• mapState、mapActions、mapMutations

//在需要使用的组件文件中引入
import {mapState、mapActions、mapMutations} from 'vuex'
export default {
	component:{
		...mapState[{'title'}]//与this.$store.title一样
	},
	methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
	}	
}

vuex新写法

export default {
data () {
return {
height:'opx'
}
},
computed: {
cinemaList: function () {
return this.$store.state.cinemalist
} 
}，

import {mapState,mapActions,mapMutations} from 'vuex'

methods:{
...mapActions(['getCinemaData']),
...mapMutations(['clearCinema']),
handleLeft(){
// console.log('left')
this.$router.push('/city')
//清空cinemaList
this.$store.commit('clearCinema')
}，

底部选项卡

show (state){
state.isTabbarShow = true
}，
hide (state) K
state.isTabbarShow = false
}