Vue.js 设置Vuex对象值格式的方法

我试图理解如何在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返回所有事件

export const events = state => state.events

然后我想在组件中将事件显示为列表/表格等

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

{{formattedDate}}
导入“时刻”
导出默认值{
姓名：'humanDate'，
道具：['timestamp']，
计算：{
formattedDate:函数（）{
返回时刻（时间戳）.format（）
}
}
}

然后使用组件本身

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

有没有一种更好的方法是我所缺少的，就是为像这样的小事情创建组件，这是对组件的合理使用。我创建了一个quick-n-dirty mixin，用于格式化日期，使用：

将其插入主Vue实例：

Vue.mixin(formatDateMixin);

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

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

---

很好，这种方法实际上感觉像是正确的方法，而不是像我的方法那样的变通方法。谢谢。Thsi实际上是mixin中的一种方法。我对Vue过滤器的理解是它们特定于组件-它们也可以是全局的。

Vue.mixin(formatDateMixin);

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