Computed Properties dinámicas con Vuejs y Vuex
En esta entrada vamos a ver cómo ahorrar cientos de líneas de código definiendo Computed Properties dinámicas con Vuejs y Vuex.
Ya sabemos que cuando trabajamos con Vuejs y Vuex haciendo uso de v-model y computed properties debemos establecer un getter y un setter para cada propiedad, el problema de esto es que si tenemos 10 computed properties podemos tener fácilmente 40 líneas de código, algo bastante difícil de mantener.
Cómo he comentado, es fácil ver que esto es bastante complejo de mantener, así que vamos a ver de qué forma podemos mejorar ese código aplicando una sencilla lógica que sea capaz de generar todos los getters y setters de forma dinámica. Lo primero que necesitamos es el código que nos ayudará a generar estas computed properties de forma dinámica. La función que sigue hace todo lo que necesitamos:
La idea es utilizar la función reduce de JavaScript iniciando dicha función con un objeto vacío (lo puedes ver al final de la definición ({})).
De esa forma generamos un objeto con toda la información necesaria, getter y setter listos para utilizar en un componente Vuejs en forma de computed property.
Utilizando el generador en nuestros componentes
Ya podemos ver cuál es la idea de utilizar un generador de código, hacer fácil algo muy tedioso, que es el databinding de Vuex a través de v-model.
Finalmente sólo necesitamos algo parecido al siguiente almacén de Vuex para manejar la lógica anterior:
Así de fácil es manejar computed properties dinámicas con Vuejs y Vuex, espero que te haya gustado y que lo utilices en tus futuros proyectos.