Model-Vue-Vue-Model — Implementando o padrão MVVM com o Vue 3

Olá cabocos o/

Me chamo Igor Dantas, sou desenvolvedor e atualmente venho dedicando grande parte dos meus estudos no VueJs, esse incrível framework que vem conquistando o coração da comunidade front-end em todo o mundo.

O Vue3 já está batendo na porta, e dentre as suas novidades, com certeza a mais empolgante é a nova Composition API.

Neste artigo iremos implementar o padrão de projeto MVVM com a ajuda da nova API provida pelo Vue3, dispensando assim o uso do VueX.

Para mais informações a respeito deste padrão de projeto e suas vantagens, sugiro a leitura deste texto da documentação oficial da microsoft.

1 — Definindo o Model

Utilizaremos interfaces para definir o nosso Model, desta forma, garantimos a integridade das instâncias, evitados erros de tipagem na hora de realizar as chamadas.

Estrutura do Model

2 — Definindo a ViewModel

Iremos utilizar uma classe para encapsular nossa ViewModel, isso garante que possamos utiliza-la de forma global ou local.

Na ViewModel global exportamos por padrão uma instancia da classe, dessa forma podemos importa-la em diferentes Views. Já na local, exportamos uma referência a classe, permitindo que ela seja instanciada isoladamente em diferentes arquivos.

No nosso exemplo iremos utilizar a função reactive da Composition API para criar um estado reativo separado do componente Vue, e funções Getters e Setters como ponte para as chamadas, desta forma protegemos o estado contra mutações diretas da camada visual.

3 — Definindo a View

Na View iremos iremos importar a nossa ViewModel e expor as funções para a DOM através da nova função Setup do Vue3.

Obs: Foi utilizado o TailwindCSS para definição da interface

4 — Resultado final

Link para o projeto no GitHut: Igor4505/vue-mvvm-demo (github.com)

5— Finish

A Composition API abriu um novo leque de possibilidades para as aplicações Vue, permitindo uma melhor organização e reaproveitamento do código, além de quebrar a dependência existente com o VueX para o gerenciamento de estado, sem dúvida a versão 3 do framework é um enorme ganho para toda a comunidade front-end.

Muito obrigado cabocos, até mais!