一、评价列表接口模拟-获取完整数据链流程
1)数据模拟mockjs src/mock/mockServer.js
/*
使用mockjs提供mock数据接口
*/
import Mock from 'mockjs'
import data from './data.json'
// 返回goods的接口
Mock.mock('/shop_goods', {code:0, data: data.goods})
// 【1】返回ratings的ajax请求接口,为0表示成功,data.ratings,在data.json中
Mock.mock('/shop_ratings', {code:0, data: data.ratings})
2)ajax请求构造 api/index.js
/*
包含n个接口请求函数的模块
函数的返回值: promise对象
*/
import ajax from './ajax.js'
const BASE_URL='/api'
// 1、根据经纬度获取位置详情 参数geohash--经纬度
export const reqAddress = geohash => ajax(`${BASE_URL}/position/${geohash}`)
...略过
//获取mockjs模拟的后端商家数据--路径不加api,此请求不从代理走
export const reqShopRating=()=>ajax('/shop_ratings') //【1】评价列表
3)mutations.js
import {
//商家相关以下3个
RECEIVE_INFO,
RECEIVE_RATINGS, //【0】商家评价mutations类型
} from './mutation-types.js'
export default{
[RECEIVE_INFO](state,{info}){state.info=info},
//【1】商家评价列表
[RECEIVE_RATINGS](state,{ratings}){state.ratings=ratings},
略过...
}
4)actions.js
// 控制mutations
import {
...
RECEIVE_INFO,//商家相关3个
RECEIVE_RATINGS,//【1】
RECEIVE_GOODS,
...
} from './mutation-types.js'
import {
...
reqShopRating,//【2】
reqShopInfo,
} from '../api/index.js'
export default{
//异步获取商家信息
async getShopInfo({commit}){
const result=await reqShopInfo()
if(result.code==0){
const info=result.data
commit(RECEIVE_INFO,{info})
}
},
// 【3】异步获取商家评价列表
async getShopRatings({commit}, callback) {
const result = await reqShopRating()
if (result.code === 0) {
const ratings = result.data
commit(RECEIVE_RATINGS, {ratings})
// 【4】数据更新了, 通知一下组件内的回调函数此处是滑动组件函数
callback && callback()
}
},
}
5)加载数据shop/rating/rating.vue
<script>
import {mapState} from 'vuex'
export default{
mounted(){
//【1】触发action发送ajax请求获取评价列表数据,并调用mutations保存到vuex状态ratings[]中
this.$store.dispatch('getShopRatings')
},
computed:{
//【2】拿到店铺信息和评价列表
...mapState(['info','ratings'])
}
}
</script>
效果:成功加载到数据http://localhost:8080/#/shop/rating
二、滑动better-scroll
shop/rating/ratings.vue
<div class="ratings" ref="ratings">...
import BScroll from '@better-scroll/core'
export default{
mounted(){
/*【1】触发action发送ajax请求获取评价列表数据,
并调用mutations保存到vuex状态ratings[]中
此处传入回调函数,在actions中要对应上 callback见*/
this.$store.dispatch('getShopRatings',()=>{
this.$nextTick(()=>{
// BScroll第一个参数可以是类名也可以用ref选中DOM
new BScroll(this.$refs.ratings,{
click:true
})
})
})
}
}
完成即有滚动效果