¿Cuál será la nueva versión de Vuex?

Vuex es un administrador estatal de aplicaciones Vue. Su próxima versión es Vuex 4, que está casi lista para su lanzamiento oficial. Agregará soporte para Vue 3, pero no traerá ninguna funcionalidad nueva.



Si bien Vuex se considera una gran solución y muchos desarrolladores la eligen como su biblioteca de administración de estado principal, esperan obtener más funciones en versiones futuras. Por lo tanto, mientras Vuex 4 se está preparando para su lanzamiento, uno de sus desarrolladores, Kia King Ishii (parte del equipo central) ya está compartiendo planes para la próxima versión 5. Vale la pena señalar que estos son solo planes y algunas cosas pueden cambiar, sin embargo, la dirección principal ya se ha elegido. Sobre él se discutirá.



Con la llegada de Vue 3 y la API de composición , los desarrolladores comenzaron a crear alternativas simples. Por ejemplo, el artículo " Probablemente no necesite Vuex " demuestra una forma simple, flexible y confiable de crear tiendas basadas en la API de composición junto con provide/inject



. Podemos suponer que esta y algunas otras alternativas están bien para aplicaciones pequeñas, pero como suele suceder, tienen sus inconvenientes: documentación, comunidad, convenciones de nomenclatura, integración, herramientas de desarrollo.







El último punto es muy importante. Vue ahora tiene una gran extensión de navegadorpara ayudar con el desarrollo y la depuración. Eliminarlo puede ser un gran desperdicio, especialmente cuando se construyen grandes aplicaciones. Afortunadamente, esto no sucederá con Vuex 5. En cuanto a los enfoques alternativos, funcionarán, pero no traerán tantos beneficios como la solución oficial. Por tanto, veamos qué tipo de ventajas nos prometen.

Creando una tienda

Antes de hacer algo con el lateral, debemos crearlo. En Vuex 4, se ve así:

import { createStore } from 'vuex'

export const counterStore = createStore({
  state: {
    count: 0
  },
  
  getters: {
    double (state) {
      return state.count * 2
    }
  },
  
  mutations: {
    increment (state) {
      state.count++
    }
  },
  
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

La tienda también consta de 4 partes: estado, donde se almacenan los datos; captadores que proporcionan estados calculados; mutaciones necesarias para cambiar de estado y acciones que se llaman fuera de la tienda para realizar operaciones en ella. Por lo general, las acciones no solo causan mutación (como en el ejemplo), sino que se utilizan para realizar tareas asincrónicas (porque las mutaciones deben ser sincrónicas ) o implementar alguna lógica más compleja. ¿Cómo se verá Vuex 5?

import { defineStore } from 'vuex'

export const counterStore = defineStore({
  name: 'counter',
  
  state() {
    return { count: 0 }
  },
  
  getters: {
    double () {
      return this.count * 2
    }
  },
  
  actions: {
    increment () {
      this.count++
    }
  }
})

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Lo primero que ha cambiado es el cambio createStore



de nombre a defineStore



. Un poco más tarde quedará claro por qué. A continuación, había un parámetro name



para especificar el nombre de la tienda. Antes de eso, dividimos los lados en módulos, y los nombres de los módulos tenían la forma de objetos con nombre. Además, los módulos se registraron en el espacio global, por lo que no eran autosuficientes y no estaban listos para su reutilización. Como solución, se tenía que utilizar un parámetro namespaced



para evitar que varios módulos respondieran al mismo tipo de mutaciones y acciones. Creo que muchos se han encontrado con esto, pero de todos modos agregaré un enlace a la documentación . Ahora no tenemos módulos, cada tienda es por defecto un almacenamiento separado e independiente.



Después de especificar el nombre, debemos convertirlo en una state



función que devuelva el estado inicial, no solo lo establezca. Esto es muy similar a lo que parece data



en los componentes. Los cambios también afectaron a los captadores, en lugar de state



utilizar una función como parámetro this



para acceder a los datos. El mismo enfoque se aplica a las acciones, en this



lugar de stat



como parámetro. Finalmente, y lo más importante, las mutaciones se combinan con juegos de acción. Kia celebróque las mutaciones a menudo se convierten en simples establecedores, haciéndolos verbosos, aparentemente esta fue la razón de la eliminación. No menciona si será posible realizar cambios de estado fuera de la tienda, por ejemplo, de componentes. Aquí, solo podemos referirnos al patrón Flux, que no recomienda hacer esto y fomenta un enfoque de cambio de estado de las acciones.



Anexo: Quienes utilicen la API de composición para crear componentes estarán encantados de saber que existe una forma de crear una tienda de manera similar.

import { ref, computed } from 'vue'
import { defineStore } from 'vuex'

export const counterStore = defineStore('counter', () => {
  const count = ref(0)

  const double = computed(() => count.value * 2)
  
  function increment () {
    count.value++
  }

  return { count, double, increment }  
})

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

En el ejemplo anterior, pasamos el nombre de la tienda como primer argumento defineStore



. El resto es la API de composición habitual, y el resultado será exactamente el mismo que en el ejemplo con la API clásica.

Inicialización de la tienda

Aquí nos esperan cambios importantes. Para describir cómo se llevará a cabo la inicialización de la tienda en la quinta versión, veamos cómo ocurre en la cuarta. Cuando creamos una tienda a través de createStore



, la inicializamos inmediatamente, para que luego podamos usarla en app.use



o directamente.

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)

app.use(store)
app.mount('#app')

//        `this.$store`
//   `useStore()`   Composition API

import store from './store'

store.state.count // -> 0
store.commit('increment')
store.dispatch('increment')
store.getters.double // -> 4

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

En la versión 5, accedemos por separado a cada instancia de Vuex, lo que garantiza la independencia. Por lo tanto, este proceso se ve diferente:

import { createApp } from 'vue'
import { createVuex } from 'vuex'
import App from './App.vue'

const app = createApp(App)
const vuex = createVuex()

app.use(vuex)
app.mount('#app')

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Todos los componentes ahora tienen la capacidad de acceder a cualquier instancia de Vuex directamente, en lugar de acceder al espacio global. Mira un ejemplo:

import { defineComponent } from 'vue'
import store from './store'

export default defineComponent({
  name: 'App',

  computed: {
    counter () {
      return this.$vuex.store(store)
    }
  }
})

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

La llamada $vuex.store



crea e inicializa la tienda (recuerde cambiar el nombre createStore



). Ahora, cada vez que se comunique con este repositorio $vuex.store



, se le devolverá una instancia ya creada. En el ejemplo, esto this.counter



es lo que podemos usar más en el código. También puede inicializar la tienda a través de createVuex()



.



Y, por supuesto, una opción para la API de composición, donde se $vuex.store



usa en su lugar useStore



.

import { defineComponent } from 'vue'
import { useStore } from 'vuex'
import store from './store'

export default defineComponent({
  setup () {
    const counter = useStore(store)

    return { counter }
  }
})

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

El enfoque descrito anteriormente (inicializar la tienda a través de componentes) tiene ventajas y desventajas. Por un lado, se trata de la separación del código y la posibilidad de agregarlo solo cuando sea necesario. Por otro lado, agregar una dependencia (ahora debe importar la tienda cada vez que planee usarla). Por lo tanto, si desea usar DI, entonces una opción que usa provide



:

import { createApp } from 'vue'
import { createVuex } from 'vuex'
import App from './App.vue'
import store from './store'

const app = createApp(App)
const vuex = createVuex()

app.use(vuex)
app.provide('name', store)
app.mount('#app')

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Y luego lanzando la tienda al componente (existe el deseo de reemplazarlo name



con una constante y ya usarlo):

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
  inject: ['name']
})

// Composition API

import { defineComponent, inject } from 'vue'

export default defineComponent({
  setup () {
    const store = inject('name')

    return { store }
  }
})

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

No hay mucho entusiasmo por esta solución, pero parece más explícita y flexible que el enfoque actual. No se puede decir lo mismo sobre el uso posterior. Ahora se ve así:

store.state.count            // State
store.getters.double         // Getters
store.commit('increment')    // Mutations
store.dispatch('increment')  // Actions

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Se espera que la nueva versión:

store.count        // State
store.double       // Getters
store.increment()  // Actions

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Todas las entidades (estado, captadores y acciones) son directamente accesibles, lo que hace que trabajar con ellas sea más fácil y lógico. Al mismo tiempo que se elimina la necesidad de mapState



, mapGetters



, mapActions



y mapMutations



, además de escribir calculados adicionales propiedades.

Compartiendo

El último punto a considerar es compartir. Recordamos que en Vuex 5 ya no tenemos módulos con nombre y cada lado es separado e independiente. Esto hace posible importarlos cuando sea necesario y usar los datos según sea necesario, al igual que los componentes. Surge una pregunta lógica, ¿cómo usar varias tiendas juntas? En la versión 4 todavía hay un espacio de nombres global y necesitamos usar rootGetters



y rootState



hacer referencia a diferentes tiendas en esta área (como en la versión 3). El enfoque en Vuex 5 es diferente:

// store/greeter.js
import { defineStore } from 'vuex'

export default defineStore({
  name: 'greeter',
  state () {
    return { greeting: 'Hello' }
  }
})

// store/counter.js
import { defineStore } from 'vuex'
import greeterStore from './greeter'

export default defineStore({
  name: 'counter',

  use () {
    return { greeter: greeterStore }
  },
  
  state () {
    return { count: 0 }
  },
  
  getters: {
    greetingCount () {
      return `${this.greeter.greeting} ${this.count}'
    }
  }
})
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Importamos la tienda, luego la registramos use



y accedemos a ella. Todo parece aún más fácil si usa la API de composición:

// store/counter.js
import { ref, computed } from 'vue'
import { defineStore } from 'vuex'
import greeterStore from './greeter'

export default defineStore('counter', ({use}) => {
  const greeter = use(greeterStore)
  const count = 0

  const greetingCount = computed(() => {
    return  `${greeter.greeting} ${this.count}`
  })

  return { count, greetingCount }
})

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Lo único que vale la pena mencionar es que use



funciona exactamente de la misma manera vuex.store



y se encarga de la correcta inicialización de las tiendas.

Soporte TypeScript

Con cambios en la API y menos abstracciones, la compatibilidad con TypeScript en la versión 4 será mucho mejor, pero aún necesitamos mucho trabajo manual. El lanzamiento de la versión 5 permitirá agregar tipos donde sea necesario y donde queramos.

Conclusión

Vuex 5 parece prometedor y es exactamente lo que muchos esperan (corregir errores antiguos, agregar flexibilidad). Se puede encontrar una lista completa de las discusiones y opiniones del equipo central en el repositorio de RFC de Vue .