Vue.jsに大量のグローバルフィルタを追加するには？

Question

Vue.jsアプリでいくつかのグローバルフィルタを使いたいと思っています。私は主なVueインスタンスの前にそれらを定義する必要があることを知っていますが、 'main.js'ファイルにそれらをすべて貼り付けることは、コード編成の観点からは私には当てはまりません。 main.jsにインポートされた別のファイルにどのように定義を入れることができますか？これのためにインポート/エクスポートのものの周りに私の頭をかなり得ることはできません。

Answer 1

filter.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 }, 
}) 

作業example。

Answer 2

私は最善の方法は...フィルタファイルで

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

をfiltersフォルダを作成し、あなたのすべてがフィルタ入れVueJS

1. からplugin機能を使用することだと思います必要な機能をエクスポートします。この例では、大文字のフィルタを使用します：

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

輸入で210

2. やプラグインを作成：あなたmain.jsで

   import uppercase from './filter1'; 
   
   
   export default { 
       install(Vue) { 
        Vue.filter('uppercase', uppercase); 
       } 
   } 
   

3. ファイルを使用し、それ

   import filters from './filters'; 
   import Vue from 'vue'; 
   
   Vue.use(filters);