Vuex proporciona herramientas convenientes para trabajar con datos, pero algunos desarrolladores no siempre los usan para su propósito previsto, o crean construcciones redundantes donde era posible escribir de manera más clara y sucinta, esto también sucede cuando un desarrollador solo se familiariza con estas herramientas. Este artículo proporcionará algunas pautas para organizar captadores que puede aplicar a su trabajo.
Los captadores son parte del repositorio de Vuex, propiedades calculadas, más específicamente. Le permiten recibir, por ejemplo, datos filtrados por algún parámetro. Pero algunos desarrolladores toman el nombre de esta herramienta literalmente y comienzan a usarla como un sustituto para obtener datos directamente del estado . De aquí sigue el primer error de usar getters.
Usando getters para recuperar fácilmente datos del almacenamiento
Veamos un ejemplo de código simple:
state: { films: [ { id: 1, name: ' ' }, { id: 2, name: ' ' }, { id: 3, name: ' 60' }, ], }, getters: { films: state => state.films, },
Este uso de getters es bastante común y esto es malo. Para acceder al estado en su componente, simplemente haga un valor calculado en calculado, por ejemplo:
computed: { films() { return this.$store.state.films; }, },
O una opción aún más conveniente usando mapState:
computed: { ...mapState(['films']), },
Adopte dicho método para obtener datos, entonces no sobrecargará su código con código superfluo.
En mi humilde opinión: muchos mezclan usando mapState y creando valores calculados que devuelven un estado. Para crear un código uniforme, use mapState y el resto de las herramientas incluso para un valor, ya que su código se volverá más uniforme y podrá hacer cambios mucho más rápido y más conveniente, por ejemplo, si tiene que mostrar un valor más.
Crear un captador para un filtro de caso de uso único
Supongamos que necesita obtener una película de James Bond, para un caso específico, es posible que desee hacer esto:
getters: { bondFilm: state => state.films .find(f => f.name === ' ') || {}, },
No es necesario hacer esto, es mejor volver a mapState nuevamente y hacer lo siguiente:
computed: { ...mapState({ bondFilm: state => state.films .find(f => f.name === ' ') || {}, }), },
De hecho, simplemente transfiere un filtro específico a su componente donde se necesita, el ejemplo es muy abstracto, pero a menudo lo conocí en la práctica.
Crear captadores con parámetros
Esta forma de trabajar con getters es muy conveniente y común, pero no debemos olvidar que los getters son propiedades calculadas y se almacenan en caché. Esto no significa que no pueda usarlo en absoluto, pero es mejor pensar una vez más si podría ser de otra manera. Echa un vistazo a un ejemplo:
getters: { filmById: state => id => state.films .find(film => film.id === id) || {}, },
El hecho es que con tal llamada, usted dice que necesita volver a calcular cada vez el resultado del captador y luego se lo da. Si es necesario ensamblar esta estructura, puede hacer algo como esto:
getters: { filmsById: (state) => { const result = {}; state.films.forEach((film) => { result[film.id] = film; }); return result; }, },
En este caso, el recálculo ocurrirá solo en caso de cambios de datos, y puede referirse a id como claves del objeto.
Para resumir
- No use getters para la recuperación de datos simple, no es necesario complicar su código con contenedores para operaciones simples
- No cree captadores para filtros específicos que se necesitarán solo una vez, la idea principal de los captadores es obtener estados derivados, pero no necesita transferir la lógica del componente a la lógica de almacenamiento
- Los captadores parametrizados pierden su propiedad principal: capacidad de almacenamiento en caché, piense varias veces antes de usarlos de esta manera
- Aproveche al máximo mapState, recuerde que la mayoría de las tareas específicas para un componente se pueden realizar al usarlo
- Use mapGetters, esto se ha dicho indirectamente, pero la uniformidad es mejor que no tenerla
Este artículo está escrito para desarrolladores principiantes y confusos, si aún no ha abierto la documentación para Vue y Vuex , y lo primero que hizo fue buscar la información sobre el problema en el concentrador, luego siga los enlaces anteriores y comience a leerlos, use consejos de varias fuentes después de eso.