Crea un getter dinámico en Vuex utilizando HOF

Clase 18 de 34 • Curso Avanzado de Vue.js 2 y Firebase por Bedu

Resumen

Por defecto, los getters no aceptan argumentos. Esto es un problema porque muchas veces necesitamos enviar argumentos para conseguir diferentes resultados y responder contenido dinámico en nuestras aplicaciones.

Afortunadamente existen los getters dinámicos: funciones getters que devuelven otras funciones (si, así como las High Orden Functions). Gracias a está técnica podemos enviar argumentos a las funciones que devuelven los gettters y obtener resultados dinámicos con todas las ventajas de pasar argumentos a una función en JavaScript.

David Daza

student•

Para este caso particular, ¿cúal es la ventaja del getter dinámico?. Siento que no es necesario puesto que el id del usuario autenticado se va a mantener durante el tiempo que esté logueado, por tanto, bastaría con crear un getter que devuelva el número de habitaciones del usuario autenticado:

getters: {
	userRoomsCount: (state, getters) => Object.keys(getters.authUser.rooms).length,
}

¿Qué opinan?

Edward Steven Ramos Palacios

teacher•

Desde mi punto de vista, el tuyo también me parece válido. Pienso que tal vez solo querían enseñar como se puede hacer uso de las HOF's en Vuex.

Omar Crespo

student•

Hacer uso de la HOF mantiene esa función mas abstracta de lo que el componente requiere lo que permitirá que sea mas fácil reutilizarlo... Cuando usas HOF normalmente si solo tienes 1 aplicación para ellas es inútil... hasta que escalas y necesitas reutilizar lógica. Y se vuelve mucho mas útil cuando te toca refactorizar lógica... Por ejemplo una HOF usada en 12 lugares diferentes y descubres forma de optimizar... Editas la HOF y listo optimización replicada en todos los "hijos" de la HOF, sin HOF tendrías que ir a cada caso de uso a refactorizar

Las buenas practicas cobran sentido cuando el proyecto crece y necesita escalar. Por ello es importante que nos acostumbremos a ellas porque se echan en falta cuando tienes un proyecto que no hace uso de ellas

Juan Castro

teacher•

Dynamic Vuex Getters - Vuex for Everyone in Vue School

Carlos Eduardo Gomez García

teacher•

Interesante, efectivamente hay maneras más cortas de hacer la misma funcionalidad, sin embargo, el objetivo de la clase es explicar cómo usar las High Order Functions, y creo que se alcanza a entender muy bien:D!

Alan Saldívar

student•

El hecho de haber explicado de una forma sencilla cómo sacar un lenght de un objeto lo vuelve en un shortcut poderoso para JS en general. Super like.

Alan Saldívar

student•

Algo que sí podemos hacer más sencillo es exportar la constante directamente en lugar de expor default

Angel Cabrera

student•

El export default es porque airbnb style guide no te permite hacer export de una sola variable. Según sus guidelines si exportas una variable, es mejor usar export default

Alejandro González Reyes

student•

Me hice bolas en la hof de es6, como quedaría con es5

Edward Steven Ramos Palacios

teacher•

getters: {
  userRoomsCount: function (state) {
    return function (id) {
      return objectCountProperties(state.user[id].rooms)
    }
  }
}

Y lo usas de la misma forma. Saludos.