vue-在js中使用全局过滤器

过滤器的使用大概是毫无疑问的，在vue.js官网有着很详细的解释,这里不多赘述。

而要在methos中使用全局过滤器的话，其实纯粹是犯懒，一开始只在dom中格式数据，哪想到，js中也有部分数据（尤其是echarts的数据）需要进行格式化，又不想将过滤器变成公用方法，毕竟这样，所有的页面都得引用一遍方法，实在是麻烦。

先尝试和dom一样，使用 |，不多说，果然失败；然后百度一波，所有文章都写着 this.$options.filters[key] 可以获取到过滤器对象，这下总没错了吧，然而！尝试了一波，研究了一波后，终于发现， this.$options.filters[key] 仅可以获得当前页面注册的过滤器，并不能获取全局过滤器。查了下，是vue2.x本身对过滤器的this的限制，官方更建议使用methods。

但是，我当前的情况是只需要改一两个地方，在现有的项目为了一点小地方，改动所有的页面的工作量过于庞大。

最终，在反复查阅资(bai)料(du)，这种想到了一个方法。dom中依旧使用过滤器进行格式化数据，而在有js需要用到的全局过滤器的话，引入方法，用methos方法进行使用。

代码如下：

• 新建一个filter.js文件，用来存放所有的过滤器方法，并使用export导出每个方法

// 统一数字格式化
export let numberUnify = data => {
	if(data){
		return data.toLocaleString()
	}else{
		return data
	}
}

// 字符串大写
export let stringUpperCase = value=> {
    if (!value) return ''
    value = value.toString()
    return value.toUpperCase()
}

• 在main.js中注册全局过滤器

import * as filters from './common/filter'

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

• 在页面中使用

<template>
    <div>
        <p>使用全局过滤器：{{10000 | numberUnify}}</p>
        <p>使用当前组件过滤器：{{'jack' | capitalize}}</p>
        <p>methods中使用局部过滤器方法：{{localFilter}}</p>
        <p>methods中使用全局过滤器方法：{{ globalFilter }}</p>
        <p>使用引入的全局过滤器：{{'jump' | stringUpperCase}}</p>
    </div>
</template>

<script>
import { stringUpperCase } from '@/common/filter'
export default {
    data(){
        return{
            globalFilter: "",
            localFilter: ""
        }
    },
    filters: {
        capitalize: function (value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
    },
    created(){
        this.globalFilter = stringUpperCase('globalFilter') // 全局过滤器调用方法
        this.localFilter = this.$options.filters['capitalize']('localFilter') // 当前局部过滤器调用方法
    }
}
</script>

如此，不论是在dom中还是js中都可以使用同一个方法，不需要进行大改了。dom显示内容：