如何在 Vue.js 中添加一堆全局过滤器？

Question

我想在 Vue.js 应用程序中使用一些全局过滤器。我知道我需要在我的主要 Vue 实例之前定义它们，但是从代码组织的角度来看，将它们全部粘贴在“main.js”文件中对我来说似乎不正确。我如何将定义放在单独的文件中，导入到“main.js”中？为此，我无法完全理解导入/导出的内容。

原文由 John Moore 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

创建一个 filters.js 文件。

 import Vue from "vue"

Vue.filter("first4Chars", str => str.substring(0, 4))
Vue.filter("last4Chars", str => str.substring(str.length - 4))

将其导入您的 main.js。

 import Vue from 'vue'
import App from './App'
import "./filters"

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
})

这是一个工作 示例。

旁注： 如果您遇到“Vue not found”类型的错误，作为测试尝试在 new Vue() 声明 之后 导入过滤器，如下所示：

 import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
})

import "./filters"

原文由 Bert 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我认为最好的方法是使用 VueJS 的 plugin 特性

1. 创建一个 filters 文件夹并将所有过滤器放在那里……

 - filters
  | - filter1.js
  | - index.js

1. 在过滤器文件中导出你需要的函数，在这个例子中我将使用大写过滤器：

    export default function uppercase (input) {
       return input.toUpperCase();
   }

1. 在 index.js 导入并创建一个插件：

    import uppercase from './filter1';


   export default {
        install(Vue) {
            Vue.filter('uppercase', uppercase);
        }
   }

1. 在你 的 main.js 文件中使用它

   import filters from './filters';
   import Vue from 'vue';

   Vue.use(filters);

原文由 Lucas Katayama 发布，翻译遵循 CC BY-SA 3.0 许可协议