VUE 定义全局过滤器及使用方法

为什么使用全局过滤器？有什么好处？什么场景下适用全局过滤器？

在项目中经常使用过滤器对数据进行格式化后显示在页面上，比如日期格式转化，数值转换成状态文字等过滤器，如果在每个.vue页面都复制同一个过滤器进行使用，虽然是没问题，但是如果过滤器方法中，需要追加新的情况判断或出现Bug时就要将每个.vue内的过滤器进行修改，既费时又费力，所以为了项目维护，可以优先考虑定义全局过滤器

方案1：

在 main.js 内直接定义过滤器

// 过滤器 1
Vue.filter("formatNumberFilter", function(value, retain) {
  if(!value){
    return null;
  }
  return value + '.' + retain;
});
// 过滤器 2
Vue.filter("aaa", function(value) {
  return '.....';
});
// 过滤器 3
Vue.filter("bbb", function(value) {
  return '.....';
});

PS：（拿过滤器1 进行举例）
formatNumberFilter：过滤器方法名
value：是准备过滤处理的数据
retain：过滤器方法括号内的第一个参数 => formatNumberFilter('00')

方案2：

新建一个用于放置过滤器方法的 js 文件

我这里是在 src 目录下，新建 filters 文件夹，文件夹内创建 index.js 文件 然后编写过滤器方法

/**
 * 注释：
 * 100 => 100.00
 * @param {string, number} value
 * @param {string} retain
 * @return {string}
 */
export function formatNumberFilter(value, retain) {
  if(!value){
    return null;
  }
  return value + '.' + retain;
}

/**
 * 注释：
 * @param {string} value
 * @return {string}
 */
export function aaa(value) {
  return '......';
}

然后再 main.js 内进行调用

import * as filters from './filters' // global filters
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key]) // 插入过滤器名和对应方法
})

PS:（通过循环，将过滤器文件内所有方法注入 main.js 内，这里循环的代码写法，像不像在 main.js 内直接定义过滤器  o_o ）

使用：

方案1~2内的过滤器 都可以使用以下方式调用

// 方法1 使用双花括号调用
{{ yatinMonthly | formatNumberFilter('00') }}

// 方法2 使用v-bind调用
<div v-bind:data="yatinMonthly | formatNumberFilter('00')"></div>

PS:

上述代码中 yatinMonthly 将作为 formatNumberFilter 的第一个参数传入，'00' 是作为第二个参数传入的