vue外卖二十一：商家详情-评价列表-条件过滤显示评价：只显示好评/差评+显示只带内容评价、用getters生成好评数量新状态

一、基本数据标识设计shop/ratings/ratings.vue

1）data数据设计

data(){
      return{
        showText:true, //条件1：只显示带文字的评价
        ratingType:2, //条件2：评价显示类型：0满意，1不满意，2全部
      }
    }

2）事件及样式类设计

知识点：

1. 绑定样式可写成：:class="{on:showText}其中on为样式，showText为数据
   也可写成：:class="showText?'on':''
2. 点击事件可写成：@click="selectType(2)"
   辅以方法 selectType(ratingType){this.ratingType=ratingType}
   也可写成：@click="ratingType=2"

<div class="ratingselect">
        <div class="rating-type border-1px">
          <!-- [条件1]如果点击此处就把data里的ratingType改为2即显示全部评价 -->
          <!-- 满足===2条件则显示active类样式 -->
          <span class="block positive" @click="ratingType=2" 
          :class="ratingType===2?'active':''">
            全部<span class="count">30</span>
          </span>
          <!-- 如果点击此处就把data里的ratingType改为0即显示满意评价 -->
          <span class="block positive" @click="ratingType=0"
          :class="ratingType===0?'active':''">
            满意<span class="count">28</span>
          </span>
          <span class="block negative" @click="ratingType=1"
          :class="ratingType===1?'active':''">
            不满意<span class="count">2</span>
          </span>
        </div>
        <!-- [条件2]如果点击此处就把data里的showText取反，即显示有内容的或全部 -->
        <!-- showText为true则显示on类样式 -->
        <div class="switch" @click="showText=!showText"
        :class="showText?'on':''">
          <span class="iconfont icon-check_circle"></span>
          <span class="text">只看有内容的评价</span>
        </div>
      </div>

======数据设计：==========
data(){
      return{
        showText:true, //只显示带文字的评价
        ratingType:2, //评价显示类型：0满意，1不满意，2全部
      }
    }

或这样写也可以

<div class="ratingselect">
        <div class="rating-type border-1px">
          <!-- [条件1]如果点击此处就把data里的ratingType改为2即显示全部评价方法1：
           ratingType=2-->
          <!-- 满足===2条件则显示active类样式方法1： 
            :class="ratingType===2?'active':''" 或见详情-->
          <span class="block positive" @click="selectType(2)" 
          :class="{active:ratingType===2}">
            全部<span class="count">30</span>
          </span>
          <!-- 如果点击此处就把data里的ratingType改为0即显示满意评价 -->
          <span class="block positive" @click="ratingType=0"
          :class="{active:ratingType===0}">
            满意<span class="count">28</span>
          </span>
          <span class="block negative" @click="ratingType=1"
          :class="{active:ratingType===1}">
            不满意<span class="count">2</span>
          </span>
        </div>
        <!-- [条件2]如果点击此处就把data里的showText取反，即显示有内容的或全部 -->
        <!-- showText为true则显示on类样式方法1：:class="showText?'on':''或见详情 -->
        <div class="switch" @click="showText=!showText"
        :class="{on:showText}">
          <span class="iconfont icon-check_circle"></span>
          <span class="text">只看有内容的评价</span>
        </div>
      </div>



=========数据及方法========
data(){
      return{
        showText:true, //只显示带文字的评价
        ratingType:2, //评价显示类型：0满意，1不满意，2全部
      }
    }
methods:{
      //点击对应元素改变data()显示评价类型为对应值
      selectType(ratingType){
        this.ratingType=ratingType
      }
    }

3） 分析

用arr.filter()返回满足条件的数组元素为一个新数组，此处有2个条件：
条件1显示：全部 或 满意 或 不满意
条件2显示：有内容 或 无内容

条件1：显示评价类型：满意0，不满意1，全部2
data里：ratingType: 0/1/2
api里：rating.rateType:0/1
ratingType===2则显示所有 不用看后面 || ratingType===rating.rateType 否则就看此是否等于data里的值，返回对应满意或不满意评价
所以：ratingType===2 || rating.rateType===ratingType

条件1 && 条件2之间是与的关系

条件2：是否只显示带内容的评价
data里：showText: true/false
api里：rating.text：有值/没值
showText为false显示所有不看后面；rating.text.length 否则就看此是否有值，有则返回true
所以：!showText || rating.text.length>0

4）根据分析写计算属性的过滤条件

<!--【2】v-for里改成：in filterRatings-->
<li class="rating-item" v-for="(rating,index) in filterRatings" :key="index">

computed:{
	  //【1】按条件过滤显示评价列表
      filterRatings(){
        const {ratings,showText,ratingType}=this
        // 返回满足条件的新数组
        return ratings.filter((rating)=>{
        /*条件1:   
         && 
         条件2:
        */
          // 解构需要的值方便简写
          const {rateType,text}=rating
          return (ratingType===2 || rateType===ratingType) && (!showText || text.length>0)
        })     
      }
}

效果：点击满意只显示满意评价，同时点击只显示有评价内容的只显示有内容评价

二、用getters.js好评数量计算

1）分析

1. 显示全部评价简单：计算所有评价长度即可 ratings.length
2. 显示好评数量：用getters生成新状态即可，具体可用：reduce()计算出rating.rateType===0的数量，即是好评数量
3. 差评数量：总数-好评 即可

2）getters.js 好评数量计算

// getters类似computed：处理vuex中现有的状态，生成返回一个所有地方都可调用的新状态
export default{
    //【1】重新计算返回评价列表所有为满意评价的数量rateType===0即表示好评
    positiveRateCount(state){
        // 此处用到三目运算：好评+1，否则+0
        return state.ratings.reduce((total,rating)=>total+(rating.rateType===0?1:0),0)
    },

}

3）调用显示好差评数量 ratings.vue

【3】显示数量
全部<span class="count">{{ratings.length}}</span>
满意<span class="count">{{positiveRateCount}}</span>
不满意<span class="count">{{ratings.length-positiveRateCount}}</span>


import {mapState,mapGetters} from 'vuex' //【0】引入getters辅助函数
computed:{
      ...mapGetters(['positiveRateCount']),//【1】好评的数量
}      

效果：正确显示总数、好评数、差评数