Как добавить кучу глобальных фильтров в Vue.js?

Я хочу использовать несколько глобальных фильтров в приложении Vue.js. Я знаю, что мне нужно определить их перед моим основным экземпляром Vue, но привязать их все в файле "main.js" не представляется мне правильным с точки зрения организации кода. Как я могу определить определения в отдельном файле, импортированном в 'main.js'? Не могу получить голову вокруг импорта/экспорта для этого.

Ответ 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 },
})

Вот рабочий пример.

Ответ 2

Я думаю, что лучший способ - использовать функцию plugin из VueJS

Создайте папку filters и поместите все ваши фильтры там...
```
- filters
  | - filter1.js
  | - index.js
```
В файле фильтра экспортируйте нужную вам функцию, в этом примере я использую фильтр в верхнем регистре:
```
export default function uppercase (input) {
    return input.toUpperCase();
}
```

В index.js импортировать и создать плагин:

import uppercase from './filter1';


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

В файле main.js используйте его

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

Vue.use(filters);

Ответ 3

Что мне нравится делать, так это

Есть фильтр для файла (модуль es6)
Зарегистрируйте фильтр глобально с помощью vue в модуле
Также экспортируйте функцию фильтра как экспорт по умолчанию

Например, для простого фильтра, который помещает разделители запятых в числа, я создаю NumberFilter.js и 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');   
   });
});

Эта стратегия позволяет мне использовать этот фильтр в коде как стандартный модуль es6, а также в моих шаблонах Vue.

В реальном мире я, вероятно, высмеиваю цифру в своем тесте и просто проверяю, что результат .format вызывается в правильном числовом формате.

Ответ 4

Vue mixins можно использовать для добавления глобальных фильтров, фильтры можно настроить в файле, а затем импортировать файл фильтров в файл main.js.

filters.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
});

И вы можете использовать фильтры в любом шаблоне.