格式化 Vuex 对象值的方法

Question

我正在尝试了解如何在 Vuex 存储中使用值并进行一些格式化，关键是我正在尝试找出 Vue 格式化存储中对象中包含的时间戳并迭代的方法对象。

例如使用以下商店

 const state = {
   events: {
     0: {
       id: 0,
       name: 'Example Event',
       start: 14907747374,
       end: 14907747674,
       entries: [0, 1]
     },
     1: {
       id: 1,
       name: 'Example Event 2',
       start: 14907740364,
       end: 14907740864,
       entries: [1]
     }
   },
   entries: {
     0: {
       id: 0,
       name: 'John Doe',
     },
     1: {
       id: 1,
       name: 'Paul Smith'
     }
   }
 }

然后我有一个getter到return所有事件

export const events = state => state.events

然后我想在组件

中将事件显示为 list/table 等

<template>
  <div class="events">
    <template v-for="event in getAllEvents">
       <div class="event>
         {{ event.name }} || {{ event.start }}
       </div>
    </template>
  </div>
</template>

<script>
  export default {
    name: 'events',
    computed: {
      getAllEvents: function () {
        return this.$store.state.events
      }
    }
  }
</script>

所以这会显示

Example Event || 14907747374
Example Event 2 || 14907740864

而我需要显示

Example Event || Jan 3rd 2017 14:15
Example Event 2 || Jan 3rd 2017 14:45

所以在 v-for 中，我想将 'event.start' 时间戳格式化为人类可读的日期，而我不确定哪种方法是 Vue 的实现方式。

过滤器

我之前用 Angular 1 过滤器做过类似的事情，但是我对 Vue 过滤器的理解是它们特定于组件，而它们在 Angular 1 中随处可用。格式化日期看起来像一个常见的任务，我应该能够编写一个函数并在需要的任何地方使用它。我可以在另一个模块中编写该函数并将其导入到组件中，但我仍然需要在我希望使用它的每个组件中编写过滤器，但至少逻辑是分开的。

组件方法函数

与这里的过滤器有相同的问题，逻辑可以是单独的函数，但我仍然有过滤器本身的重复

单独的组件

可能是我想到的最好的解决方案，但感觉像是滥用组件来实现这种次要功能

<template>
  <span>{{ formattedDate }}</span>
</template>

<script>
  import 'moment'
  export default {
    name: 'humanDate',
    props: ['timestamp'],
    computed: {
      formattedDate: function () {
        return moment(timestamp).format()
      }
    }
  }
</script>

然后按原样使用组件

<human-date timestamp="event.start"></human-date>

有没有更好的方法我错过了，并且正在为诸如合理使用组件之类的小事情创建组件？

Answer 1

查看Mixins. I created a quick-n-dirty mixin for formatting dates using moment.js:

import moment from 'moment'

export default {
    formatDateMixin: {
        methods: {
            formatDate: function(value) {
                if( !value) return '';

                return moment(value).format('YYYY-MM-DD HH:mm:ss');
            }
        }
    }
}

将其插入您的主 Vue 实例：

Vue.mixin(formatDateMixin);

现在您可以在任何模板中使用它了：

{{ event.name }} || {{ formatDate(event.start) }}

格式化 Vuex 对象值的方法

Methods of formatting a Vuex object value

vue.js

vuex

过滤器

组件方法函数

单独的组件