1、合并参数
合并params和query参数
goSearch(){
//代表的是如果有query参数也带过去
if (this.$route.query) {
let location = {
name: "Search",
params: { keyword: this.keyword || undefined },
};
location.query = this.$route.query;
this.$router.push(location);
}
}
2、mockjs模拟数据
mockjs插件模拟数据
npm install mockjs
1、项目中创建src/moc文件夹
2、准备json数据(moc文件夹创建响应的json文件)
3、把mock数据放在public文件夹下
4、通过mockjs创建虚拟数据
5、在main.js中引入mockServer.js
src/mockServer.js
//先引入mockjs模块
import Mock from 'mockjs';
//把JSON数据格式引入进来[JSON数据格式根本没有对外暴露,但是可以引入]
//webpack默认对外暴露的:图片、JSON数据格式
import banner from './banner.json';
import floor from './floor.json';
//mock数据:第一个参数请求地址 第二个参数:请求数据
Mock.mock("/mock/banner",{code:200,data:banner});//模拟首页大的轮播图的数据
Mock.mock("/mock/floor",{code:200,data:floor});
3、在store中存取轮播图数据
灵魂三连环
1、store中的state存储一个数组,因为返回的就是一个数组
2、mutations中修改路逻辑
3、actions中commit数据结果
4、组件(listContainer)中已经携带了bannerList数据
store/home/index.js
import {reqCategoryList,reqGetBannerList} from '../../api'
//home提供的小仓库
const state={
//state中数据默认的初始值别些小,服务器返回是对象,则为对象,返回是数组,则为数组
categoryList:[],
//banner轮播图中的数组
bannerList:[]
}
const mutations={
CATEGORYLIST(state,categoryList){
state.categoryList=categoryList
},
GETBANNERLIST(state,bannerList){
state.bannerList=bannerList
}
}
const actions={
//通过api里面的接口函数,向服务器请求数据
async categoryList({commit}){
let result=await reqCategoryList()
//如果提交数据成功(状态码200),就去提交一个动作个mutation
if(result.code === 200){
commit("CATEGORYLIST",result.data)//result.data就是服务器返回的数据
}
},
//获取首页轮播图的数据
async getBannerList({commit}){
let result=await reqGetBannerList()
//如果提交数据成功(状态码200),就去提交一个动作个mutation
if(result.code === 200){
commit("GETBANNERLIST",result.data)//result.data就是服务器返回的数据
}
}
}
const getters={}
export default {
state,
mutations,
actions,
getters
}
views/home/listContainer
//引入仓库
import {mapState} from 'vuex'
export default {
name: 'ListContainer',
mounted () {
//派发action:通过vuex发起ajax请求,将数据存储在仓库里
this.$store.dispatch('getBannerList')
},
computed:{
...mapState({
bannerList:(state)=>{
return state.home.bannerList
}
})
}
}
</script>
4、使用swiper插件实现轮播图
1、引包(swiper和相应的css)
2、要先有页面结构
3、要new Swiper实例
5、使用watch+$nextTick解决轮播图
<!--banner轮播-->
<div class="swiper-container" id="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(carousel,index) in bannerList " :key="carousel.id">
<img :src="carousel.imgUrl" />
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
由于没有使用$nextTick(),以下代码是错误的
watch:{
bannerList:{
handler(newValue,preValue){
//通过watch侦听器监听bannerList的属性的属性值的变化
//如果执行handler方法,代表组件实例身上属性的属性值已经有了(数组有4个元素)
//只能保证数据有了,但无法保证v-for执行完毕,这时结构还是不一定有
let mySwiper = new Swiper(document.getElementsByClassName("swiper-container"),{
loop:true,
pagination:{
el: '.swiper-pagination',
clickable: true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
}
},
使用$nextTick要穿一个回调函数
在下次dom更新循环结束后执行延迟回调,在修改数据之后立即使用这个方法,获取更新后的dom
以下代码是正确的
watch:{
bannerList(newValue,preValue){
//nextTick要穿一个回调函数
//在下次dom更新循环结束后执行延迟回调,在修改数据之后立即使用这个方法,获取更新后的dom
this.$nextTick(()=>{
//当执行这个回调函数的的时候,服务器的数据已经回来了,v-for执行完毕,也就是说轮播图的结构一定是有了的
let mySwiper = new Swiper(document.getElementsByClassName("swiper-container"),{
loop:true,
pagination:{
el: '.swiper-pagination',
clickable: true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
})
},
}