¿Dónde poner "filtros" globales después de que se eliminan los filtros en Vue 3?

0

Digamos que tengo un archivo utils / filtros.js con muchos ayudantes de cadena, pero aquí hay un breve ejemplo:

const filters = [
  {
    name: 'twitterLink',
    filter: (username) => {
      return `https://twitter.com/${username}`;
    }
  },
];

export default filters;

Y lo importo a main.js antes de inicializar mi aplicación:

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

filters.forEach(f => {
  Vue.filter(f.name, f.filter)
});

new Vue({
  render: h => h(App)
}).$mount('#app')

Para poder usarlo en cualquier componente, en cualquier lugar de la aplicación, sin tener que importarlo:

<a :href="user.twitterUsername | twitterLink">
  {{ user.twitterUsername | twitterLink }}
</a>

¿Cuál sería la mejor manera de reemplazar estos filtros globales cuando se eliminan los filtros en Vue 3 ?

2
  • 2
    ¿Por qué no los importa y los usa como funciones? 12/06/20 a las 22:11
  • Me gustaría importarlos solo una vez en main.js (o donde sea apropiado) para no tener que importarlos repetidamente en todas partes.
    robtree
    12/06/20 a las 22:20
0

Sugerencia

Sé que dijiste que no quieres tener que importar cada elemento individualmente, pero te sugiero que lo hagas, por algunas razones:

  1. No tiene que buscar la documentación del filtro de Vue para comprender cómo funciona. Es muy explícito de dónde provienen las funciones y cómo se implementan.
  2. Las funciones en sí mismas son solo JavaScript. Puede modificarlos / componerlos para que se ajusten a casos de usos especiales a diferencia de los filtros incorporados que no puede tocar.
  3. Puede importar y reutilizar mediante programación estas funciones en métodos, propiedades calculadas y en cualquier lugar donde escriba JavaScript.

Alternativas (no recomendadas)

Adjuntarlos a Vue.prototype

Vue.prototype.filters = {
  someFilter: ...,
  anotherFilter: ...
}
<ul v-for="word in filters.someFilter(words, userInput)">
  <li>{{word}}</li>
</ul>

Ir funcional (avanzado)

computed: {
  filteredThings () {
    return this.things
       .filter(contains(this.foo))
       .sort(by(thing => thing.bar))
       .slice(0, 10)
  }
}

Donde se ven las funciones de ayuda:

// a function that returns a predicate function for array.filter()
function contains (value) {
  return thing => thing.indexOf(value) > -1
}

function by (getValue) {
  return (a, b) => {
    return getValue(a) > getValue(b) ? 1 : -1
  }
}

Pensamientos finales

Una vez más, una consideración de diseño muy importante es que los filtros integrados pueden ser útiles, pero carecen de la flexibilidad de JavaScript puro .

0
0

Se puede utilizar provide, injectpara proporcionar a sus filtros globaly e inyectarlos cuando sea necesario en sus componentes.

P.ej:

import filters from "@/utils/filter

const App = {
   provide: function(){
     return {
       filter1: method,
       filter2: method,
       ...,
       ...filters.reduce((obj, entry)=>obj[entry.name]=entry.filter, {}),
       filterN: method

     }
   },
   setup(){...}
}

y en otro componente:

const comp = {
   inject: ["filer1", "filterN", "twitterLink"],
   ...,
   computed:{
      twitterLinksFromUsers(){
        return this.users.map(this.twitterLink);
      }
   }
}

para las plantillas, debe soltar la tubería |e invocar esos métodos.

Si desea acceder al filtro con this.filter[filterName]soloprovide(){return {filter:{...filters}}