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

Question

我有一组带有预先格式化日期的日历事件：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>

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

Answer 1

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

如果您的 Vuex 存储中的事件以 dstart 作为 UNIX 时间戳存储，则以下代码片段应该会为您提供所需的动态行为。

我在组件的数据中创建了一个 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>

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

How to create Date(now) within Vue.js to use in a computed property?

date

vue.js

computed-properties

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

How to create Date(now) within Vue.js to use in a computed property?

date

vue.js

computed-properties

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