Vue项目数据动态过滤实践及实现思路

<template>
 <div>
  {{ rootFilters( sexVal )}}
 </div>
</template>
<script type='text/javascript'>
 import Vue from 'vue'
 import { registerFilters } from 'utils/filters'
 export default {
  data() {
   return {
    sexVal: 1 // 性别
   }
  },
  methods: {
   /* 根组件上的过滤器 */
   rootFilters(val, id = 'SEX_TYPE') {
    const mth = this.$root.$options.filters[id]    return mth && mth(val) || val
   }
  },
  created() {
   // 把根组件中的filters响应式化
   Vue.util.defineReactive(this.$root.$options, 'filters', this.$root.$options.filters)
  },
  mounted() {
   registerFilters.call(this)
    .then(data =>
     // 这里获取到数据字典的data
    )
  }
 }
</script>

注册filter的js

// utils/filters
import * as Api from 'api'
/**
* 获取并注册过滤器
* 注册在$root.$options.filters上不是$root.$options.filters.__proto__上
* 注意这里的this是vue实例，需要用call或apply调用
* @returns {Promise}
*/
export function registerFilters() {
 return Api.sysParams()      // 获取数据字典的Api，返回的是promise
  .then(({ data }) => {
   Object.keys(data).forEach(T =>
    this.$set(this.$root.$options.filters, T, val => {
     const tar = data[T].find(item => item['paramValue'] === val)
     return tar['paramDesc'] || ''
    })
   )
   return data
  })
  .catch(err => console.error(err, ' in utils/filters.js'))
}

这样把根组件上的filters变为响应式化的，并且在渲染的时候因为在 rootFilters 方法中访问了已经在created中被响应式化的 $root.$options.filters ，所以当异步获取的数据被赋给 $root.$options.filters 的时候，会触发这个组件render watcher的重新渲染，这时候再获取 rootFilters 方法的时候就能取到filter了；

那这里为什么不用Vue.filter方法直接注册呢，因为 Object.defineProperty 不能监听 __proto__ 上数据的变动，而全局Vue.filter是将过滤器注册在了根组件 $root.$options.asset_types.__proto__ 上，因此其变动不能被响应。

这里的代码可以进一步完善，但是这个方法存在一定的问题，首先这里使用了 Vue.util 上不稳定的方法，另外在使用中到处可见 this.$root.$options 这样访问vue实例内部属性的情况，不太文明，读起来也让人困惑。

因此在这个项目做完等待测试的时候我思考了一下，谁说过滤器就一定放在filters里面 -。-，也可以使用mixin来实现嘛

2.2 使用mixin

使用mixin要注意一点，因为vue中把data里所有以 _ 、 $ 开头的变量都作为内部保留的变量， 并不代理到当前实例上 ，因此直接 this._xx 是无法访问的，需要通过 this.$data._xx 来访问。