vue外卖二十：商家详情-评价列表：评价列表接口模拟-vuex获取完整数据链流程、滑动better-scroll

一、评价列表接口模拟-获取完整数据链流程

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
          })
        })
      })
    }
    
}

完成即有滚动效果