如何在 Vue.js 中创建 Date(now) 以在计算属性中使用？

Posted 2023-02-23

【中文标题】如何在 Vue.js 中创建 Date(now) 以在计算属性中使用？

【英文标题】：How to create Date(now) within Vue.js to use in a computed property?

【发布时间】：2019-10-04 21:54:19

【问题描述】：

我有一组带有预先格式化日期的日历事件：20190517T010000Z。

我需要根据以下内容过滤数组：

1) 未来事件（发生大于NOW 的任何事件）

2) 过去事件（发生时间少于NOW 的任何事件）

3) 在过去 7 天内创建的新事件（NOW - 7 天）

我在下面有一个硬编码示例 - 但需要 NOW 是动态的并且基于用户的系统时间。我不知道如何以与我在数组中获取的日期时间格式相同的格式获取NOW。另外，我不知道它应该驻留在我的代码中的哪个位置（在单独的 JS 文件中或在 Vue 组件中）？

一旦我让它在下面列出的组件中工作，它将被移动到 VUEX Getter。

<template>
    <div class="text-left m-4 p-4">
        <div>
            Total Number Events:  allEvents.length 
        </div>
        <div>
            Events Created In Last 7 Days:  createdEvents 
        </div>
        <div>
            Future Events:  futureEvents 
        </div>
        <div>
            Past Events:  pastEvents 
        </div>
    </div>
</template>

<script>
import  mapState  from 'vuex'

export default 
  computed: 
    ...mapState(['allEvents']),

    futureEvents () 
      return this.$store.state.allEvents.filter(allEvents => allEvents.dtstart >= '20190517T010000Z').length
    ,

    pastEvents () 
      return this.$store.state.allEvents.filter(allEvents => allEvents.dtstart <= '20190517T235900Z').length
    ,

    createdEvents () 
      return this.$store.state.allEvents.filter(
        allEvents => allEvents.created >= '20190511T235900Z' && allEvents.created <= '20190517T235900Z' )
        .length
    
  ,

</script>

上面的代码有效——但它现在是硬编码的，它需要是动态的。欢迎任何想法或建议。

【参考方案1】：

您的所有日期时间对象都应保留为 UNIX 时间戳（自 1970 年 1 月 1 日以来的 UTC 秒数）。这将允许您比较不同时区的系统时间。

假设您的 Vuex 存储中的事件以 dstart 作为 UNIX 时间戳存储，则以下 sn-p 应该为您提供所需的动态行为。

我在组件的数据中创建了一个now 属性。这会每秒更新一次，从而导致计算的属性刷新。

此外，如果 Vuex 存储中的 allEvents 属性更新，计算的属性也会刷新。

<template>
    <div class="text-left m-4 p-4">
        <div>
            Total Number Events:  allEvents.length 
        </div>
        <div>
            Events Created In Last 7 Days:  createdEvents 
        </div>
        <div>
            Future Events:  futureEvents 
        </div>
        <div>
            Past Events:  pastEvents 
        </div>
    </div>
</template>

<script>
    import  mapState  from 'vuex'
    export default 
        data () 
            return 
                now: new Date().getUTCSeconds()
            
        ,
        created () 
            this.scheduleUpdateNow();
        ,
        methods: 
            updateNow() 
                this.now = new Date().getUTCSeconds();
                this.scheduleUpdateNow();
            ,
            scheduleUpdateNow() 
                setTimeout(this.updateNow, 1000);
            
        ,
        computed: 
            ...mapState(['allEvents']),

            futureEvents () 
                return this.$store.state.allEvents.filter(allEvents => allEvents.dtstart > this.now).length
            ,

            pastEvents () 
                return this.$store.state.allEvents.filter(allEvents => allEvents.dtstart <= this.now).length
            ,

            createdEvents () 
                return this.$store.state.allEvents.filter(
                    allEvents => allEvents.created >= this.now && allEvents.created <= this.now).length
            
        
    
</script>

【讨论】：

P.S.我不确定您的最后一个计算函数 createdEvents 正在做什么 - 我已经“按原样”保留逻辑。它似乎可以找到现在创建的所有事件 - 但这不太可能匹配任何内容，因为“现在”非常具体！

感谢您的回答...createdEvents 用于过滤在两个日期之间创建的事件 - “结束”日期为现在并返回 7 天。一旦我有了现在的日期，计算应该不会太难。

欣赏这个......我不知道该把现在放在哪里

日期时间将通过日历系统预先格式化为YYYYMMDDTHHMMSSZ ... 将在哪里重新格式化/重塑传入的日期时间？

也许当您从日历系统接收事件时，将字符串解析为 Date 对象，然后将日期存储为 UNIX 时间戳。