页面首次加载所有数据与点击当前日期展示过滤之后的数据思路

Question

datalist是原始数据，datafilter是过滤之后的数据，用datafilter去做循环建立两个空数组，第一次请求，两个数组都有当月数据，然后点击日期的那个方法执行之后，采用原始数据过滤之后给datafilter，我想知道大家还有更好的方式实现嘛？<div class="d-list-cont" v-if="datafilter.length>0">    <div class="d-list" v-for="(item,index) in datafilter" :key="index">        ........................    </div></div><div class="no-data" v-else>    <div class="img"></div></div>data() {    return {        datalist:[],        datafilter:[],    }},methods:{    getData(){        this.$get('接口地址',请求参数)        .then(response=> {            this.datalist=response            this.datafilter=response        })        .catch(error=> {            //alert('错误')        });    },    //点击日期的方法    clickDay(data) {        //把2018/07/26 格式化符合后端需求格式一样的        var a = data.split('/');        var b = a[0] + '-' + (a[1] < 10 ? '0':'') + a[1]+'-'+ (a[2] < 10 ? '0':'')+a[2];        if(this.datalist){            this.datafilter=this.datalist.filter(o=>o.recoverTime===b)        }    },}

Answer 1

我解释一下上面关于computed的评论吧

Vue是响应式的，这就意味着一个好的设计模式是只保存源数据，进一步的变换交给框架。换言之，就是不增加没有必要的状态。所以我的建议是把datafilter放到computed里面。

{

    data() {

        return {

            datalist: [],

            // filter就应该存filter，如果按原来的逻辑，应该叫filteredDataList

            // 其实我更喜欢selectedDate，更加明确

            // datafilter: null,

            selectedDate: null,

        }

    },

    computed: {

        filteredDatalist() {

            if (this.selectedDate) {

                return this.datalist.filter(({ recoverTime }) => recoverTime === this.selectedDate);

            }

            else {

                return this.datalist;

            }

        }

    },

    methods: {

        getData() {

            this.$get('接口地址', 请求参数)

                .then(response => {

                    this.datalist = response

                })

                .catch(error => {

                });

        },

        clickDay(date) {

            var a = date.split('/');

            // 用楼上的方式更优雅一些

            this.selectedDate = a[0] + '-' + (a[1] < 10 ? '0' : '') + a[1] + '-' + (a[2] < 10 ? '0' : '') + a[2];

        },

    },

}

好处都有啥？谁说对了就给他

1. 解开了计算过程和点击按钮的耦合。假如以后想要加上前一天/后一天的功能，只需要写日期加减本身的代码，不用再复制粘贴计算过程了；

2. 解开了datalist生命周期的限制。假如以后想要加上datalist实时更新的功能，只需要定时getData就行了（或者用websocket，不论是啥），不需要用户触发clickDay就能自动刷新；

3. Vue会智能地管理computed属性的缓存，如果用户clickDay两次都相同，只会计算一次。

其实这种思想已经很函数式了，相当像Rx。但是Vue的学习成本比Rx低得多，这么简单就能用上函数式，何乐不为？

Answer 2

我就觉得这两句可以换一个优雅点的方式

var a = data.split('/');

var b = a[0] + '-' + (a[1] < 10 ? '0':'') + a[1]+'-'+ (a[2] < 10 ? '0':'')+a[2];

改为

// 如果你的数据结构是2018/07/26,为什么还要去判断加0，直接用replace替换不好吗

// data.replace(/\//g, '-')

// 加0写法

const b = `${a[0]}-${a[1].padStart(2, '0')}-${a[2].padStart(2, '0')}`;