Vue学习笔记4.10

Swiper

mounted:组件挂载完毕，正常说DOM已经全有了
为什么Swiper实例在mounted当中直接书写不可以，因为结构还没有完整（ajax请求的数据还没有回来，仓库中的数据还没有，所以结构还不完整）

最完美的解决方案，解决轮播图问题

使用watch+nextTick
watch:{
//监听bannerList数据的变化，以为这个数据从空数组变成有4条数据的数组
bannerList:{
handler(newVal, oldVal){
//如果执行handler方法，代表组件实例身上这个属性已经有了
//当前这个函数执行，只能保证bannerList数据已经有了，但是没办法保证v-for已经执行完成
//v-for执行完毕，才有结构
//在下次DOM更新循环之后，执行延迟回调，在修改数据之后，立即执行这个方法
this.nextTick(()=>{
new Swiper()…
})
}
}
}

开发Floor组件

切记：仓库当中的state的数据格式，不能瞎写，胡写，数据格式取决于服务器返回的数据格式

getFloorList这个action在哪里触发

是需要在Home路由组件当中触发的，不能在Floor组件内部触发action，因为我们需要v-for遍历组件

v-for也可以在自定义标签中使用

组件通信的方式有哪些？面试频率极高

props：用于父子组件通信
自定义事件：@on, @emit 可以实现子给父通信
全局事件总线： @bus 全能
pubsub-js: vue当中几乎不用 全能
插槽
vuex

把首页当中的轮播图封装为一个全局的组件

公用组件的结构和样式必须几乎是一样的
watch:{
list:{
//立即监听，不管数据有没有变化，上来就监听一次
immediate:true,
//为什么watch监听不到list，因为这个数据从来没有发生变化（数据是父亲给的，父亲给的时候就是一个对象，对象里面的数据没有发生变化）
handler(){
//只能监听到数据已经有了，但是v-for动态渲染结构还没办法确定，因此还需要使用nextTick
new Swiper…
}
}
}
切记：以后在开发项目的时候，如果看到某个组件在很多地方都有使用，就把它变成全局组件
注册一次，可以在任意地方使用，公用的组件|非路由组件放到components文件夹中

Search模块开发

1.先静态页面 + 静态组件拆分

2.发请求（API）

3.vuex（3连环）

vuex中的计算属性getters

项目中getters的主要作用是：简化仓库中的数据
可以把我们将来在组件当中需要用到的数据简化一下【将来组件在获取数据的时候就方便了】

getters:{
	goodsList(){
		return state.searchList.goodsList;
	}
}

computed:{
//mapGetters里面的写法：传递的数组，因为getters计算是没有划分模块的【home，search】
	...mapGetters(['goodsList'])
}

methods:{
// 向服务器发送请求获取search模块的数据（根据参数不同返回不同的数据进行展示）
	getData(){
		this.$store.dispatch('getSearchList',{})
	}
}

//当组件挂载完毕之前执行一次（先于mounted之前）
beforeMount(){
	//在发请求之前，把向服务器发的参数进行整理
	Object.assign(this.searchParams, this.$route.query, this.$route.params)
}
//组件挂载完毕执行一次【仅仅执行一次】
mounted(){
	//在发请求之前带给服务器参数【searchParams参数发生变化有数值带给服务器】
}

4.组件获取数据，动态展示数据

动态开发面包屑的分类名

编程式导航路由跳转【自己跳自己】

动态开发面包屑的关键字

当面包屑中的关键字清除之后，需要让兄弟组件中的关键字清除
涉及组件通信：
props: 父子
自定义事件： 子父
vuex：存储数据（万能）
插槽：父子
$bus: 万能

//在跟组件里面, 配置全局事件总线$bus
beforeCreate(){
	Vue.prototype.$bus = this;
}

 //在事件组件中
this.$bus.$emit('clear');

//在显示组件中
this.$bus.$on('clear', ()=>{ this.keywords = ''})
if(this.$route.params){
	this.$router.push("name":"search", params:this.$route.params)
}