Vuex a implementação da arquitetura flux de forma descomplicada
Algumas ferramentas alcançam a eficiência pois foram desenvolvidas por quem domina o problema. Essa parece ser o caso da lib e do ecossistema Vue.js (vuejs.org), quando se tem um problema na organização da base de código de FrontEnd (HTML, CSS, JavaScript) busca-se soluções que podem minimizar esse problema, esse é o caso do conceito de WebComponents.
O cenário do problema em Grandes projetos:
Você começa a desenvolver sua aplicação baseada em componentes, cada componente com seu estado (seus dados), ela começa a ganhar robustez, mais e mais componentes, não tardará a necessidade de trocar esses dados entre os componentes. Uma forma eficaz de se fazer isso é emitir e capturar eventos. O problema dessa abordagem em aplicativos de larga escala é a capacidade de mantê-los, ou seja, entender os mais diversos fluxos, qual componente enviou oque para quem.
e se…
Tivéssemos um objeto global que centralizasse os estados dos componentes e outros componentes pudessem pegá-los a qualquer hora?
Tivéssemos um objeto global (STORE) que centralizasse os estados (STATES) dos componentes e em outros componentes pudessem pegá-los (GETTERS ) a qualquer hora?
Captou?
O conceito nos bastidores:
Diante desse cenário entra em cena o Flux, que é um conceito abstrato arquitetural desenvolvido pelo Facebook, que visa implementar essa troca de estado entre componentes através de fluxos.
Três elementos essenciais:
dispatch : Emissão por uma ação dentro de um componente ORIGEM.
store: Armazenamento centralizado do estado (state) dos componente e as mudanças (mutations)
getters: Recuperação do estado pelo componente DESTINO.
(Pronto, temos como trocar dados entre componentes de forma reativa.)
Outro coisa importante é que: Mutations e somente mutations deverá alterar states nas stores. Isso para o desenvolvedor ter o controle do fluxo de dados de forma centralizada e coesa.
Termos complicados né? Quando vi pela primeira vez também achei. Aqui o segredo para esclarecer as ideias é tentar esquecer por hora algumas arquiteturas como MVC por exemplo.
O ecossistema Vue.js trás ótimas implementações desse conceito, o mais popular é o Vuex.
Além disso trás uma atração a mais, o Vue-dev-tools um plugin para o Chrome, tem uma aba dedicada ao Vuex, ele permite que você acompanhe em tempo real todas as mudanças de estado dos seus componentes, bem como o estado geral da Aplicação que é o conjunto de todos os estados dos componentes.
Portanto, Vuex é uma implementação elegante e simples que soluciona um problema de aplicações FrontEnd baseadas em WebComponents implementando o conceito de flux.
Aqui você encontra um repositório com projeto de exemplo:
Algumas referências sobre a comunidade:
Telegram (https://telegram.me/vuejsbrasil)
Vuejs Brasil (https://www.facebook.com/groups/vuejsbr/)
Slack (http://slack.vuejs-brasil.com.br/)
MeetupSP: http://www.meetup.com/pt-BR/VueJS-SP/
