Vue过滤器 — 如何将filter.js文件中的所有方法优雅的挂载到Vue.filter上

背景：在vue-cli环境下，后台返回 createTime: “2016-01-29T00:49:53.000+0000” 这样的时间格式，前端展示不太友好，同时数据格式是有规律的，且适用范围较大，所以第一想到的是vue中的filter。但一般项目中会将所有的filter函数统一存放在filter.js中，那么我们怎么样可以把filter.js中的所有方法优雅的挂载到Vue.filter上供我们使用呢？

1、全局过滤器

在项目中创建filter.js文件，如下图：

在filter.js中，用 export 将 formatDateTime 方法导出，代码如下：

export function formatDateTime (msg){
    var dateee = new Date(msg).toJSON();
    var date = new Date(+new Date(dateee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'') 
    return date
}

在main.js中，引入filter文件，并将文件中所有的函数处理方法依次挂载到Vue.filter上，代码如下：

import * as filters from './utils/filter'; // 全局filter

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key]);
});

这里用 import * as 的形式将filter文件引入，将 filter.js文件中所有 export 导出的函数组合成一个数组返回

Object.keys(filters) 的console结果

此时，filter.js中函数的名称即为过滤器的名称。

在vue文件中的使用：

<template>
  <div>
    {{createTime | formatDateTime}}
  </div>
</template>
<script>
export default {
  data() {
    return {
      createTime: "2016-01-29T00:49:53.000+0000"
    };
  }
};
</script>