This content originally appeared on DEV Community and was authored by Daywison Silva
No framework Vue, na sua atual versão 3, é possível utilizar a API de composição (Composition API) para lidar com possíveis cenários de repetição de código.
As funcionalidades base do framework, como funções para lidar com estado reativo, observar mudanças de estado, definição de componentes, métodos de ciclo de vida, etc., agora podem ser importadas. Dado isso, podemos declarar explicitamente o que queremos usar do framework. A abordagem é um pouco parecida com os "hooks" para quem vem do mundo do React.
Aqui vai um exemplo:
global.js
import { reactive } from 'vue';
const state = reactive({ count: 0 })
const incrementCount = () => state.count++;
export default { state, incrementCount };
No código acima é importada uma função que vai lidar com a reatividade do objeto, que é passado como argumento contento o atributo "count". Dessa forma qualquer alteração no atributo "count", será reativo, ou seja, qualquer lugar(componente, função, etc.) que use o "count" receberá a atualização em primeira mão, porque todos os valores dentro do objeto(state) são reativos.
Com alguns novos recursos do Vue também é possível implementar funcionalidades parecidas com as da API de contexto do React. É possível agora utilizar provide / inject para trabalhar com estado global (não se limita a isso).
Agora com a nossa loja(store) configurada com o estado e a função incrementCount() que manipula um valor do estado, é necessário "prover"(provide) esse estado para toda a nossa aplicação Vue.
main.js
import { createApp } from "vue";
import global from "@/global";
const app = createApp({
provide: {
global
},
...
}
Agora todos os nossos componentes podem ter acesso ao estado e as funções que manipulam o mesmo, mas para isso ser possível é necessário fazer uma "injeção" do estado global no componente, para isso iremos utilizar o "inject":
MyComponent.vue
<template>
<div>{{ global.state.count }}
<button @click="global.incrementCount">Increment</button>
</template>
<script>
export default {
inject: ["global"]
}
</script>
Dessa maneira já temos um estado global simples já implementado, mas a pergunta é, substitui VueX? A resposta é, depende.
O VueX por ser um projeto, relativamente, grande e que já tem um bom tempo no ecossistema Vue foi pensado e feito somente para lidar com o estado global da aplicação, ele pode (sugerível) ser usado em aplicações que exijam um estado global mais complexo, e as motivações são as seguintes:
VueX conta com a extensão do Vue que facilita bastante a inspeção do estado global, lá ele lista as mutations, actions, getters, e o próprio estado global de uma forma mais amigável, as informações ficam mais acessíveis.
VueX conta com vários plugins famosos que podem ser úteis em vários cenários, como o "vuex-persisted" que persiste o estado global da aplicação no local storage.
Bom, entendendo quais problemas cada solução veio resolver, agora você pode escolher qual atende o cenário do seu projeto. 😀
Referências:
https://vuejsdevelopers.com/2020/10/05/composition-api-vuex/
This content originally appeared on DEV Community and was authored by Daywison Silva
Daywison Silva | Sciencx (2021-12-23T23:09:41+00:00) Devo usar Composition API como substituto do VueX?. Retrieved from https://www.scien.cx/2021/12/23/devo-usar-composition-api-como-substituto-do-vuex/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.