在vuex的store里获取的数据如何做分类处理，并添加属性

Question

我在 vuex中请求到的数据：

data: [
    {
    id: 1,
    play_alias: 'basketball', // 商品简称
    play_type: '001', // 玩法
    order_status: 1, // 0.待支付; 1.支付成功,待出票; 2.出票成功,待开奖; 3.出票失败,待退款, 4.已退款, 5.未中奖, 6.已中奖
    show_status: 1,  // 显示状态; 0,不显示（用户删除）, 1,显示
    
    },
    {
    id: 2,
    play_alias: 'football'
    play_type: '003',
    order_status: 4,
    show_status: 1,
    }
]

需要这样展示：

问题：

1. 根据show_status判断是否显示；
2. 根据order_status分类，中奖、待开奖、未开奖；
3. 根据play_alias添加固定的中文名(我的想法是根据play_alias添加一个play_name属性，然后直接渲染play_name上去就好了)

Answer 1

其实就是数据的过滤，转化

//html
<ul>
 <li v-for="(item,index) in data" :key="index" v-if="item.show_status">
     <span>{{item.play_type}}</span>
     <span>{{getName(item.play_alias)}}</span>
     <span>{{getStatus(item.order_status)}}</span>
 </li>
</ul>

//js
methods:{
 getName(text){
     switch(text){
         case 'basketball':return '篮球';
         case 'football':return '足球';
         default : return "未知"
     }
 },
 getStatus(text){
     switch(text){
         case 0:return '待支付';
         case 1:return '支付成功,待出票';
         case 2:return '出票成功,待开奖';
         case 3:return '出票失败,待退款';
         case 4:return '已退款';
         case 5:return '未中奖';
         case 6:return '已中奖';
         default : return "未知"
     }
 },
}

Answer 2

1.可以在组件里加filter，具体怎么用可以看vue的文档，有专门的filter讲解（不鼓励做伸手党，看文档能学到更多的东西
2.差值表达式可以执行简单的js代码，分支过多还是算了。或者在请求返回交给state之前处理掉
3.如果中文名称与play_alias字段的映射关系不想维护在前端可以增加一个字段，否则也可以用第二条，在返回后交给state之前处理掉

Answer 3

1.一般这个可以让后台把返回值修改一下,
2.你也可以前端在返回来的值用comouted做一个处理,
3.还可以定义一个过滤器处理对应返回的值

Vue.filter("formatAlias",function(playalias){
  if(playalias=='basketball'){
      playalias=="篮彩"
  }
})