Vuex: uso excesivo de captadores en la aplicación. Error al analizar

Este artículo discutirá un error común que la mayoría de los principiantes cometen al desarrollar una aplicación en Vue + Vuex. Hablaremos sobre getters y cómo usarlos correctamente. También veremos las funciones auxiliares mapState y mapGetters.

Antes de leer: Se recomienda que tenga un conocimiento básico de Vue y Vuex.

Capítulo 1. ¿Qué son los captadores? Ejemplo de uso inapropiado

Los captadores son parte del repositorio de Vuex que devuelve datos calculados sobre el estado actual del repositorio a nuestros componentes.

Considere un ejemplo:

const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] }, getters: { //     books: state => state.books } }); 

Esto se verá como un componente con una lista de todos los libros:

 export default { computed: { //   books() { return this.$store.getters.books } } } 

El ejemplo anterior funciona, pero no vale la pena. Con este enfoque, sobrecargamos la aplicación.

Si necesita enviar datos directamente desde el almacenamiento al componente sin ninguna modificación, los captadores no son la mejor solución. A continuación, le mostraré cómo puede mejorar el código y deshacerse del uso inapropiado de getters.

Capítulo 2. Uso de mapState para recuperar datos del almacenamiento

La documentación dice:

Cuando un componente necesita usar muchas propiedades o captadores de almacén, declarar todas estas propiedades calculadas puede ser tedioso. En tales casos, puede usar la función mapState , que genera automáticamente propiedades calculadas.

Volvamos a nuestro componente y usemos mapState en lugar de un getter:

 import { mapState } from 'vuex'; export default { computed: { ...mapState([ 'books' ]) } } 

Se puede eliminar un captador del repositorio, porque ya no lo necesitamos:

 const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] } }); 

Mucho más conveniente, ¿verdad? Eliminamos los captadores innecesarios y redujimos la cantidad de código.

Capítulo 3. Por qué getters, si hay mapState

Y aún se necesitan. Los captadores se usan en casos en los que necesita mostrar información modificada del repositorio (por ejemplo, una lista de todos los libros leídos ).

Creemos un captador para que todos los libros se lean del repositorio:

 const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] }, getters: { //     finishedBooks: state => { return state.books.filter(books => books.finished); } } }); 

Ahora nuestro componente se verá así:

 import { mapState } from 'vuex'; export default { computed: { //     ...mapState([ 'books' ]), //     finishedBooks() { return this.$store.getters.finishedBooks } } } 

Uno podría detenerse en esto, pero hay una cosa más útil que vale la pena conocer. Si necesita reutilizar el mismo captador en diferentes componentes, puede que no sea muy conveniente escribir captadores cada vez en el método calculado. MapGetters viene al rescate .

Veamos un ejemplo:

 //     import { mapState, mapGetters } from 'vuex'; export default { computed: { //     ...mapState([ 'books' ]), //   ,   //       ...mapGetters([ 'finishedBooks' ]) } } 

La mejora es obvia: usando mapGetters redujimos la cantidad de código.

También puede calcular la información del repositorio en función de algunos datos, por ejemplo, obtener un libro por su identificación o nombre. Esto se puede lograr pasando un argumento a nuestro captador.

 const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] }, getters: { //     finishedBooks: state => { return state.books.filter(books => books.finished); }, //    id getBookById: (state) => (id) => { return state.books.find(books => books.id === id) } } }); 

 import { mapState, mapGetters } from 'vuex'; export default { computed: { ...mapState([ 'books' ]), ...mapGetters([ 'finishedBooks', 'getBookById' ]), getBook() { //    id === this.id return this.getBookById(this.id) } } } 

Material de fijación

• Use getters cuando necesite mostrar información modificada del repositorio (por ejemplo, una lista de todos los libros leídos), en otros casos, use la función auxiliar mapState.
• A los captadores se les pueden pasar argumentos adicionales para calcular datos basados ​​en ellos.
• Los resultados de Getter se actualizan cuando cambia una de las dependencias.

Documentación de Getter en ruso

Ejemplo de aplicación de un artículo sobre codepen