Comment ajouter une série de filtres globaux dans Vue.js ?

Question

Je souhaite utiliser quelques filtres globaux dans une application Vue.js. Je sais que je dois les définir avant mon instance Vue principale, mais les placer tous dans le fichier " main.js " ne me semble pas correct du point de vue de l'organisation du code. Comment pourrais-je avoir les définitions dans un fichier séparé, importé dans " main.js " ? Je n'arrive pas à comprendre les trucs d'import/export pour cela.

Answer 1

Créez un fichier filters.js.

import Vue from "vue"

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

Importez-le dans votre fichier main.js.

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

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

Voici un exemple de fonctionnement exemple .

Answer 2

Je pense que la meilleure façon de procéder est d'utiliser la fonction plugin fonctionnalité de VueJS

1. Créer un filters et y placer tous vos filtres ...

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

2. Dans le fichier de filtre, exportez la fonction dont vous avez besoin. Dans cet exemple, j'utiliserai un filtre pour les majuscules :

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

3. Dans le cadre de la index.js importer et créer un plugin :

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

4. En vous main.js fichier l'utiliser

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

Answer 3

Ce que j'aime faire, c'est

1. Avoir un filtre par fichier (module es6)

2. Enregistrer le filtre globalement avec vue dans le module

3. Exporter également la fonction de filtrage en tant qu'exportation par défaut

Par exemple, pour un filtre simple qui place des séparateurs de virgules dans les nombres, je crée NumberFilter.js et NumberFilter.test.js.

NumberFilter.js

import Vue from 'vue';
import numeral from 'numeral';

const NumberFilter = number => numeral(value).format('0,0');

Vue.filter('number', numberFilter);

export default numberFilter;

NumberFilter.test.js

import NumberFilter from './NumberFilter';

describe('NumberFitler', () => {
   it('exists', () => {
      expect(NumberFilter).toBeDefined();
   });

   it('does its thing', () => {
       expect(NumberFilter(1234)).toEquals('1,234');   
   });
});

Cette stratégie me permet d'utiliser ce filtre dans le code comme un module es6 standard et dans mes modèles Vue.

Dans le monde réel, je me moquerais probablement de numeral dans mon test et je m'assurerais simplement que le résultat de .format est appelé avec le bon format de nombre.

Answer 4

Mixins Vue peut être utilisé pour ajouter des filtres globaux, les filtres peuvent être configurés dans un fichier et ensuite importés dans main.js fichier.

filtres.js

export default{
    firstWordCapitalize (value) => {
        if (!value)
            return ''
        value = value.toString()
        return value.charAt(0).toUpperCase();
    },
    anotherFilter(value) =>{
      return value+"-test";
    }
}

main.js

import Vue from 'vue';
import Filters from './filters';
Vue.mixin({
  filters: Filters
});

Et vous pouvez utiliser des filtres dans n'importe quel modèle.