VueJS 3: Estado global com API de composição

A nova API de composição permite que você se livre da loja Vuex. Vejamos um exemplo simples de como fazer isso. E considere os prós e os contras.

Exemplo

Vamos pegar um exemplo de contador Vuex da documentação da loja mais simples e implementá-lo usando a API de composição.



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

import { ref } from 'vue'

const counter = ref(0)

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

Observe que a variável do contador está fora da função useCounter (). Assim, quando a função useCounter for chamada em componentes diferentes, counter fará referência à mesma instância. E é disso que precisamos.



Usar nosso contador em diferentes componentes é simples:

<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 o contador global, você só precisa importar useCounter para os módulos necessários e usá-lo.



Se você precisa restringir o acesso à variável do contador, você não pode exportar, mas a função 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 }
}

Prós e contras

Uma das melhores coisas sobre Vuex é trabalhar com devtools Vue.js. É muito conveniente ver todo o estado global na forma de uma árvore, ver as chamadas para mutações com as variáveis ​​passadas e também ser capaz de reverter para diferentes estados. Como a API de composição será suportada no devtools Vue.js ainda não está claro, o trabalho ainda está em andamento.



A estrutura do Vuex - getters, mutações, ações - pode soar sintaticamente redundante, mas permite uma apresentação clara e separação do trabalho do módulo de armazenamento e é mais um mais do que um menos. E ao usar a API de composição, o desenvolvedor decide tudo sozinho, ele pode fazer um doce, ou talvez não.



O suporte a TypeScript é um ponto fraco do Vuex. Todos os artigos que tentam digitar Vuex parecem assustadores. E é assim que Vuex prolixo se torna muito prolixo. Se estivermos usando a API de composição, é mais simples, use o TypeScript normalmente.



O Vuex se conecta como um plugin e está disponível em todos os componentes por meio deste. $ Store. No caso da API de composição, precisamos importar o módulo. Não há muita diferença e ambas as abordagens permitem que você trabalhe com o estado global.



O uso da API de composição, por outro lado, nos livra de dependências desnecessárias e nos permite organizar o estado global como é conveniente. Por outro lado, a questão do teste permanece. Os próprios módulos globais são fáceis de testar, mas os módulos que os utilizam já são mais difíceis de testar.

Conclusão

Ainda não está claro se vale a pena abandonar o Vuex, mas definitivamente há uma nova ferramenta que permite resolver os problemas resolvidos pelo Vuex. Em breve ficará claro qual abordagem é melhor e em que caso. Nesse ínterim, os desenvolvedores do Vuex não anunciaram a dobradura do projeto e viram como antes, e na documentação do Vue3 ainda há um link para o Vuex.