vue获取的数据怎么做分开处理？

Question

问题：

1. 我从后端接口获取到数据，怎么根据获取的数据进行分类；
   代码如下：

data: [
    {
    id: 1,
    play_type: '001',// 玩法
    order_status: 1, // 0,待支付; 1,支付成功,待出票; 2,出票成功,待开始; 3,出票失败,待退款, 4,已退款, 
    show_status: 1,  // 显示状态; 0,不显示（用户删除）, 1,显示
    },
    {
    id: 2,
    play_type: '003', // 玩法
    order_status: 4,
    show_status: 1,
    },{
    id: 3,
    play_type: '002', 
    order_status: 2,  
    show_status: 0,
    }
]

我需要依据 play_type 单独分类， order_status 单独分类；
就比如我拿出 play_type 为一样的数据组成数组；
最后根据 show_status 来判断是否显示。

Answer 1

通过vue的计算属性computed和过滤器filter;

computed:{
    // 玩法1
    playType1(){
    // 这里this.data初始化要是空数组
     return this.data.filter(v => v.play_type === '001');
    }
    // 玩法2 3 类似。 付：可定义一个palyType的数组 写个方法简化代码
    
    // order_status 与玩法类似
    orderStatus1(){
        return this.data.filter(v => v.order_status === 1);
    }
},
filters:{
    showStatus(val){
        return val.filter(v => v.show_status === 1);
    }
}

整体是这样，不过不知道你需要怎么展示

如果是在store里分配 直接在请求 获取数据后 把数据分好，state里存下你分好的数据

const state = {
    // 初始化 data 这里用一个对象把获取到的原始data和你需要分配的数据包起来
    data：{
        orgData：[], // 原始数据
        playType1:[], // 玩法
        //2,3,4.....
        orderStatus1:[] // 状态
        // 2,3,4....
    }
};

const actions = {
    // action的方法
    async getData(store){
        try{
            const res = await fn(), // 你的请求方法 res是返回的数据
               orgData= res;
               playTypeData1 = orgData.filter(v => v.play_type === '001'),
               orderStatusData1 = orgData.filter(v => v.show_status === 1);
               // 然后 用 commit 或dispatch 保存到state里面
        }catch(e){
        }
    }
}

全局 注册 一个过滤器

Vue.filter('showStatus', function(val){
        return val.filter(v => v.show_status === 1);
    }
)

在组件里面使用

// 你用的是mapSate
computed：{
    ...mapState(['data'])
}
// 及 data = {orgData,playType1,orderStatus1}