VueJS 3: Estado global con API de composición

La nueva API de composición le permite deshacerse de la tienda Vuex. Veamos un ejemplo simple de cómo lograrlo. Y considere los pros y los contras.

Ejemplo

Tomemos un ejemplo de un contador en Vuex de la documentación de la tienda más simple e impleméntelo usando la API de composición.



Módulo contador módulos / contador.ts:

import { ref } from 'vue'

const counter = ref(0)

export default function useCounter () {
  const increment = () => {
    counter.value++
  }
  return { counter, increment }
}

Tenga en cuenta que la variable de contador está fuera de la función useCounter (). Por lo tanto, cuando se llama a la función useCounter en diferentes componentes, counter se referirá a la misma instancia. Y esto es lo que necesitamos.



Usar nuestro contador en diferentes componentes es simple:

<template>
    <div>
      {{ counter }}
    </div>
   <button @click="increment">+</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import useCounter from '@/modules/useCounter'

export default defineComponent({
  name: 'App',
  setup () {
    const { counter, increment } = useCounter()
    return { counter, increment }
  }
})
</script>

Para usar el contador global, solo necesita importar useCounter en los módulos necesarios y usarlo.



Si necesita restringir el acceso a la variable de contador, no puede exportarla, sino la función getter:

import { ref, computed } from 'vue'

const counter = ref(0)
const getCounter = computed(() => counter.value)
const increment = () => counter.value++

export default function useCounter () {
  return { getCounter, increment }
}

Pros y contras

Una de las mejores cosas de Vuex es trabajar con devtools de Vue.js. Es muy conveniente ver el estado global completo en forma de árbol, ver las llamadas a mutaciones con las variables pasadas y también poder retroceder a diferentes estados. Aún no está claro cómo se admitirá la API de composición en Vue.js devtools, el trabajo aún está en progreso.



La estructura de Vuex (captadores, mutaciones, acciones) puede parecer sintácticamente redundante, pero permite una presentación clara y una separación del trabajo del módulo de repositorio y es más una ventaja que una desventaja. Y cuando usa la API de composición, el desarrollador decide todo él mismo, puede hacer un caramelo, o tal vez no.



La compatibilidad con TypeScript es un punto débil en Vuex. Todos los artículos que intentan escribir Vuex dan miedo. Y así es como Vuex detallado se vuelve muy detallado. Si usamos la API de composición, es más simple, use TypeScript como de costumbre.



Vuex se conecta como un complemento y está disponible en todos los componentes a través de este. $ Store. En el caso de la API de composición, necesitamos importar el módulo. No hay mucha diferencia y ambos enfoques le permiten trabajar con el estado global.



El uso de la API de composición, por otro lado, nos libera de dependencias innecesarias y nos permite organizar el estado global como sea conveniente. Por otro lado, la cuestión de las pruebas permanece. Los módulos globales en sí mismos son fáciles de probar, pero los módulos que los utilizan ya son más difíciles de probar.

Conclusión

Aún no está claro si vale la pena abandonar Vuex, pero definitivamente hay una nueva herramienta que te permite resolver los problemas resueltos por Vuex. En un futuro próximo, quedará claro qué enfoque es mejor y en qué caso. Mientras tanto, los desarrolladores de Vuex no han anunciado sobre el plegado del proyecto y lo vieron como antes, y en la documentación de Vue3 todavía hay un enlace a Vuex.