Post Top Ad

Your Ad Spot

sábado, 25 de julio de 2020

¿Qué hay de nuevo en Vuex 4?

Lo nuevo en Vuex 4

Introducción

Con los años, las aplicaciones frontend se han vuelto cada vez más complejas y estratificadas. A medida que se manejan más y más datos en la interfaz, quizás el desafío más importante es administrar los diversos estados complejos en los que puede estar una aplicación cliente. Esta es la razón por la cual la administración del estado es quizás el desafío más crítico en la construcción de aplicaciones frontales robustas.
En los últimos años, Redux, MobX y Vuex se han convertido en las bibliotecas más populares para la gestión del estado en el ecosistema de JavaScript. A pesar de que Redux probablemente sea el más popular de ellos, Vuex ha consolidado su lugar como la biblioteca de administración de estado de facto para aplicaciones web creadas en Vue.js, principalmente debido a su relativa simplicidad y su integración con Vue.

¿Por qué vuex?

Tanto Redux como Vuex están inspirados en la arquitectura Flux . Sin embargo, la principal diferencia está en cómo manejan el estado. En Redux, que es más popular entre los desarrolladores de React, el estado es absolutamente inmutable; Con Vuex, tiene reglas de mutación específicas que son mucho más accesibles, menos detalladas y más intuitivas.
Los componentes Vue obtienen su estado de la tienda Vuex, que es esencialmente un objeto, pero con características distintas de un objeto JavaScript simple: son reactivos y no se puede mutar directamente el estado de la tienda. La única forma de cambiar el estado de una tienda es mediante la confirmación explícita de mutaciones .

¿Qué hay de nuevo?

Vuex ha pasado por varias iteraciones para llegar a su estado actual. En este artículo, nos enfocaremos en las novedades de la última versión de VueX, la versión .v4.0.0-beta
Los objetivos principales de la versión 4 son admitir la nueva API de composición introducida en Vue 3 y simplificar el uso de Vuex en general. También está destinado a admitir una inferencia más sólida para TypeScript. Exploraremos cada uno de estos en detalle con algunos ejemplos.

Rompiendo cambios

Al momento de escribir esto, acababa de ser liberado. Uno de los principales cambios importantes es la eliminación de los tipos globales para los componentes Vue. El objetivo de esta función es permitir a los usuarios mecanografiados componer capas de escritura completas en componentes. Por lo tanto, los desarrolladores pueden hacer declaraciones manuales que permitirán estructuras completamente tipadas que eran casi imposibles en Vuex 3.VueX@v4.0.0betathis.$store
En resumen, según las notas de la versión :
Cuando use TypeScript, debe proporcionar su propia declaración de aumento.
Aquí está el ejemplo proporcionado en las notas de la versión anterior:
// vuex-shim.d.ts declara el módulo "@ vue / runtime-core" { // Declara los estados de tu propia tienda. interfaz Estado { 
    cuenta : número
   } interfaz ComponentCustomProperties { 
    $ tienda : Tienda < Estado >; } }
   
  
    
     
  
Exploraremos esto con más detalle a continuación.

Estado

La definición de una tienda generalmente comienza con la definición de state:
interface Actor {
  name: string
  age: number
  }
interface State {
  loading: boolean
  data: Array<Actor>
}
export const state:State = {
  loading: false,
  data: [{name: 'John',age: 25}]
Es importante exportar el tipo de estado porque se usará en las definiciones de captadores, así como en mutaciones y acciones. Hay un repositorio de GitHub para los ejemplos en esta publicación aquí .

Mutaciones

Al igual que en Redux y otras implementaciones de Flux, es común almacenar mutaciones como constantes. El enfoque aquí sería almacenar todas nuestras mutaciones potenciales como una MutationTypesenumeración.
// mutation-types.ts: export enum MutationTypes { 
  SET_LOADING = 'SET_LOADING' , 
  FETCH_ACTORS = 'FETCH_ACTORS' , 
  ADD_ACTOR = 'ADD_ACTOR' , 
  REMOVE_ACTORS = 'REMOVE_ACTOR' }
       
Ahora podemos declarar un "contrato" para cada una de nuestras mutaciones. Este es un patrón común en Redux, análogo a reducersUna mutación es simplemente una función que acepta el estado y una carga útil opcional, muta el estado y devuelve el estado recién actualizado.
Con nuestro nuevo conocimiento, declaremos un tipo para nuestra mutación. Tenemos un par de opciones para hacer esto; la forma más robusta es emplear TypeScript genericpara escribir nuestra mutación:
// mutuations.ts import { MutationTypes } de './mutation-types' import { State } from './state' export type Mutations < S = State > = { 
  \ [ MutationTypes . SET_LOADING \ ] ( estado : S , carga útil : boolean ): void }
     
     
      
¿Te ves bien hasta ahora? Ahora escribamos una implementación:
import { MutationTree } de 'vuex' import { MutationTypes } de './mutation-types' import { State , Actor } from './state' export type Mutations < S = State > = { 
  \ [ MutationTypes . SET_LOADING \ ] ( estado : S , carga útil : booleana ): vacío , 
  \ [ MutationTypes .     
     
     
      REMOVE_ACTORS \ ] ( estado : S , payload : Actor ): Array < Actor > , 
  \ [ MutationTypes . ADD_ACTOR \ ] ( estado : S , payload : Actor ): Array < Actor > , } exportar mutaciones constantes : MutationTree < State > & Mutations = {     \ [ MutationTypes .    

      
SET_LOADING \] ( estado , carga útil : booleana ) {       estado . cargando = estado de retorno de la carga útil }, 
  \ [ MutationTypes . REMOVE_ACTORS \ ] ( estado , carga útil : Actor ) {     estado . data = [ payload ] return state . datos }, 
  \ [ MutationTypes . ADD_ACTOR \ ] ( estado  

      
      
 
    
  , payload: Actor) {
    state.data = [payload]
    return state.data
  }
}
The mutations store all potential implemented mutations. This will be eventually used to construct the store.

Actions

Let’s write a simple action for our application. First, let’s type the action type with an enum:
// action-types.ts
export enum ActionTypes {
  GET_ACTOR = 'GET_ACTORS',
}
```
`actions.ts`
```
import { ActionTypes } from './action-types'
export const actions: ActionTree<State, State> & Actions = {
  async \[ActionTypes.GET_ACTORS\]({ commit }) {
   const allActors = await fetch('actorsAPI').then((actors)=> commit(MutationTypes.ADD_ACTOR , actores )) return allActors
   }, }
   

Getters

Getters también se pueden escribir estáticamente. Un captador no es muy diferente de una mutación, ya que es esencialmente una función que recibe un estado y realiza un cálculo en él.
A continuación se muestra un ejemplo que toma stateel primer argumento y devuelve el actornombre en mayúsculas. Esto puede volverse realmente complejo, pero sigue los mismos principios básicos:
// getters.ts import { GetterTree } de 'vuex' import { State } from './state' tipo de exportación Getters = { 
  capitalizeName ( state : State ): string [] } export const getters : GetterTree < State , State > & Getters = { capitalizeName : ( state ) => { return
     
     
    

       
     
    Estado . los datos . map ( actor  => actor . name . toUpperCase ()) }, }
  

$storeTipo global

Como se mencionó anteriormente, ahora debe escribir explícitamente su tienda para acceder a ellos en sus componentes. Por lo tanto, todos los tipos de Vuex predeterminados (getters, commit y dispatch) serán reemplazados por nuestros tipos personalizados.
Para hacer que nuestros tipos definidos sean globalmente accesibles y funcionen correctamente, necesitamos pasarlos a Vue, así:
// vuex-shim.d.ts import { State } desde '../state' 
declare module "@ vue / runtime-core" { // Declare sus propios estados de la tienda. Estado de la interfaz { 
      cuenta : número
     }
     
    
      

    interfaz ComponentCustomProperties {
      $ store:Store<State>; }}   
    
  

Uso en componentes

Ahora que tenemos una tienda tipificada, utilicémosla en un componente para solidificar los conceptos. Examinaremos el uso en un componente con la sintaxis de la API de composición, ya que este es un cambio importante para Vue y uno de los propósitos centrales de Vuex 4.

API de composición

We must access the store through the useStore hook with the Composition API. The useStore hook essentially returns our store:
export function useStore() {
  return store as Store
}


<script lang="ts">
import { defineComponent, computed, h } from 'vue'
import { useStore } from '../store'
import { MutationTypes } from '../store/mutation-types'
import { ActionTypes } from '../store/action-types'
export default defineComponent({
  name: 'CompositionAPIComponent',
  setup(props, context) {
    const store = useStore()
    const actors = computed(() => store.state.data)
    const capitalizeActors = computed(() => store.getters.capitalizeName)
    async  function removeActor() {
      store.commit(MutationTypes.REMOVE_ACTORS,  {name: 'John',age: 67})
    }

    async function addActor() {
      const result = await store.dispatch(ActionTypes.GET_ACTORS, {name: 'John',age: 67})
      return result
    }
    return () =>
      h('section', undefined, [
        h('h2', undefined, 'Composition API Component'),
        h('p', undefined, actors.value.toString()),
        h('button', { type: 'button', onClick: addActor }, 'Add Actor'),
             h('button', { type: 'button', onClick: removeActor}, 'Remove Actor'),
      ])
  },
})
</script>
Lo que obtenemos es una tienda totalmente estáticamente tipada. Solo podemos comprometer / despachar mutaciones / acciones declaradas con cargas útiles apropiadas; de lo contrario, recibimos un error.
Esto es fantástico para el análisis estático, que es excelente para el código autodocumentado. Si trató de enviar una carga útil malformada o una acción no iniciada, tiene el compilador TypeScript gritándole y guiándolo a la corrección. Eso es asombroso, ¿no?

Conclusión

Hemos visto qué hay de nuevo y qué hay en trámite para Vuex 4. En el momento de la redacción, es la única versión de Vuex 4 con importantes lanzamientos de funciones con un cambio innovador, es decir, un tipeo robusto para la tienda y una excelente integración con el Composición API en Vue 3.v4.0.0-beta.1
v4.0.0-beta.3También viene con una característica importante: la createLoggerfunción se exportó desde , pero ahora está incluida en el paquete principal. Debe importar la función directamente desde el paquete Vuex. Esta es una característica pequeña pero importante a tener en cuenta.Vuex/dist/logger
Es imperativo recordar que Vuex 4 todavía está en versión beta y, por lo tanto, está etiquetado como prelanzamiento, lo que implica que podemos esperar cambios más emocionantes que no se han implementado o lanzado por completo. Estos incluyen eliminar mapXXXy eliminar la necesidad de separar acciones y mutaciones.
Es un momento tan emocionante para ser fanático y usuario de Vue y Vuex. Esté atento al lanzamiento oficial de Vuex 4 con todas las nuevas y sorprendentes funciones. Estoy particularmente encantado con la escritura estática mejorada. Una vez más, aquí hay un repositorio de GitHub para los ejemplos de código.

Experimente sus aplicaciones Vue exactamente como lo hace un usuario

La depuración de aplicaciones Vue.js puede ser difícil, especialmente cuando hay docenas, si no cientos de mutaciones durante una sesión de usuario. Si está interesado en monitorear y rastrear mutaciones Vue para todos sus usuarios en producción, pruebe LogRocket .https://logrocket.com/signup/
LogRocket es como un DVR para aplicaciones web, que graba literalmente todo lo que sucede en sus aplicaciones Vue, incluidas solicitudes de red, errores de JavaScript, problemas de rendimiento y mucho más. En lugar de adivinar por qué ocurren los problemas, puede agregar e informar en qué estado se encontraba su aplicación cuando ocurrió un problema.
El complemento LogRocket Vuex registra las mutaciones de Vuex en la consola de LogRocket, lo que le proporciona un contexto sobre lo que condujo a un error y en qué estado se encontraba la aplicación cuando se produjo un problema.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas