Как создать Date (сейчас) в Vue.js для использования в вычисляемом свойстве? - PullRequest
Новая
       31

Как создать Date (сейчас) в Vue.js для использования в вычисляемом свойстве?

0 голосов
/ 17 мая 2019

У меня есть массив событий календаря с предварительно отформатированной датой: 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 Ответ

0 голосов
/ 17 мая 2019

Все ваши объекты даты и времени должны быть сохранены как метки времени UNIX (UTC секунды с 01.01.1970).Это позволит вам сравнивать время в разных системах независимо от часового пояса.

При условии, что события в вашем хранилище Vuex хранятся с dstart как метка времени UNIX, следующий фрагмент должен дать вам требуемое динамическое поведение.

Я создал атрибут now в данных компонента.Это обновляется каждую секунду, вызывая обновление вычисляемых свойств.

Кроме того, если обновляется свойство allEvents в хранилище Vuex, вычисленные свойства также обновляются.

<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>
...