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

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里面。{&nbsp; &nbsp; data() {&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; datalist: [],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // filter就应该存filter，如果按原来的逻辑，应该叫filteredDataList&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 其实我更喜欢selectedDate，更加明确&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // datafilter: null,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectedDate: null,&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; computed: {&nbsp; &nbsp; &nbsp; &nbsp; filteredDatalist() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (this.selectedDate) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return this.datalist.filter(({ recoverTime }) => recoverTime === this.selectedDate);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return this.datalist;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; methods: {&nbsp; &nbsp; &nbsp; &nbsp; getData() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$get('接口地址', 请求参数)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(response => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.datalist = response&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .catch(error => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; clickDay(date) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var a = date.split('/');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 用楼上的方式更优雅一些&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.selectedDate = a[0] + '-' + (a[1] < 10 ? '0' : '') + a[1] + '-' + (a[2] < 10 ? '0' : '') + a[2];&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; },}好处都有啥？谁说对了就给他解开了计算过程和点击按钮的耦合。假如以后想要加上前一天/后一天的功能，只需要写日期加减本身的代码，不用再复制粘贴计算过程了；解开了datalist生命周期的限制。假如以后想要加上datalist实时更新的功能，只需要定时getData就行了（或者用websocket，不论是啥），不需要用户触发clickDay就能自动刷新；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')}`;