如何在 Vue 中从另一个过滤器访问一个附加的过滤器

Question

我已经设置了一个文件来保存附加到我的 Vue 对象的过滤器，这是我的 App.js 中的 required。但是我有一个过滤器，理想情况下可以使用另一个过滤器：

Vue.filter('formatDateTime', value => {
    if (value)  return moment(String(value)).format('DD-MMM-YY hh:mm')
});
Vue.filter('getActivity', value =>
    (!value.lastvisited)
        ? 'Not visited yet' 
        : 'Last logged in ' + Vue.$options.filters.formatDateTime(value.lastvisited)
)

但是它不能引用全局 Vue 对象，有没有办法解决这个问题？ 我当然可以重复日期格式代码，但我不想这样做。

Answer 1

一种选择是分开定义和全局注册

（加上它现在在非 vue 上下文中可用/可导入）

// ie. in filters.js
export const formatDateTime = value => value 
  ? moment(String(value)).format('DD-MMM-YY hh:mm') 
  : null

export const getActivity = value => !value.lastvisited
  ? 'Not visited yet' 
  : 'Last logged in ' + formatDateTime(value.lastvisited)

// ie. in in a filter-global-registration.js
import { getActivity, formatDateTime } from 'filters.js'

Vue.filter('formatDateTime', formatDateTime);
Vue.filter('getActivity', getActivity)

Answer 2

我通常做的是创建一个对你的主 Vue 对象的全局引用，比如：

// Create a filter which calls another filter.
Vue.filter('myFilter', () => {
    window.Vue.$options.filters.myOtherFilter(...);
});

// Initialize the main Vue object.
window.Vue = new Vue({

});

然后，您应该能够在过滤器函数中使用window.Vue.$options.filters.myOtherFilter() 访问您的过滤器。

这可能并不理想，但它在一些情况下帮助了我，你必须定义不给你当前使用的 Vue 实例的插件/服务/组件。