Introdução
Pinia, uma biblioteca leve de gerenciamento de estado para Vue.js, ganhou popularidade recentemente. Ele usa o novo sistema de reatividade no Vue 3 para construir uma biblioteca de gerenciamento de estado intuitiva e totalmente digitada.
O sucesso do Pinia pode ser atribuído aos seus recursos exclusivos (extensibilidade, organização do módulo de armazenamento, agrupamento de mudanças de estado, criação de vários armazenamentos e assim por diante) para o gerenciamento de dados armazenados.
Por outro lado, Vuex também é uma biblioteca de gerenciamento de estado popular construída para a estrutura do Vue, e é a biblioteca recomendada para gerenciamento de estado pela equipe principal do Vue. A Vuex é altamente focada na escalabilidade do aplicativo, ergonomia do desenvolvedor e confiança. É baseado na mesma arquitetura de fluxo do Redux.
Neste artigo, faremos uma comparação entre Pinia e Vuex. Analisaremos a configuração, os pontos fortes da comunidade e o desempenho de ambas as estruturas. Também veremos as novas mudanças no Vuex 5 em comparação com o Pinia 2.
Os snippets de código usados neste artigo são baseados na API de composição Vue 3.
Configuração
Configuração Pinia
É fácil começar a usar o Pinia porque ele só requer instalação e criação de uma loja.
Para instalar o Pinia, você pode executar o seguinte comando em seu terminal:
fio adicionar pinia @ próximo # ou com npm npm install pinia @ next
Esta versão é compatível com Vue 3. Se você está procurando uma versão compatível com Vue 2.x, verifique o
Pinia é um invólucro da API de composição Vue 3. Portanto, você não precisa inicializá-lo como um plug-in, a menos que haja uma situação em que você queira suporte para devtools Vue, suporte SSR e divisão de código do webpack:
//app.js
importar {createPinia} de'pinia'
app.use (createPinia ())
No snippet acima, você adiciona Pinia ao projeto Vue.js para que possa usar o objeto global de Pinia em seu código.
Para criar um armazenamento, você chama o método defineStore com um objeto contendo os estados, ações e getters necessários para criar um armazenamento básico:
//armazena/todo.js
importar {defineStore} de'pinia' export const useTodoStore=defineStore ({ id:'todo', estado: ()=> ({contagem: 0, título:"Cozinhar macarrão", feito: falso})
})
Configuração Vuex
O Vuex também é fácil de configurar, exigindo instalação e criando uma loja.
Para instalar o Vuex, você pode executar os seguintes comandos em seu terminal:
npm install vuex @ next--save # ou com fio yarn add vuex @ next--save
Para criar um armazenamento, você chama o método createStore com um objeto contendo os estados, ações e getters necessários para criar um armazenamento básico:
//store.js
import {createStore} de'vuex'
const useStore=createStore ({ Estado: { todos: [ {id: 1, título:'...', concluído: verdadeiro} ] }, getters: { doneTodos (estado) { return state.todos.filter (todo=> todo.done) } }
})
Para acessar o objeto global Vuex, você precisa adicionar Vuex ao arquivo de projeto raiz Vue.js da seguinte maneira:
//index.js
import {createApp} de'vue'
importar aplicativo de'./App.vue'
import {useStore} de'./store'
createApp (App).use (store).mount ('# app')
Uso
Vuex e Pinia acessam suas lojas de maneira um pouco diferente.
Uso de Pinia
Usando Pinia, a loja pode ser acessada da seguinte maneira:
exportar o defineComponent padrão ({ configurar() { const todo=useTodoStore () Retorna { //dá acesso apenas a um estado específico estado: computado (()=> todo.title), } },
})
Observe que o objeto de estado da loja é omitido ao acessar suas propriedades.
Uso de Vuex
Usando a Vuex, a loja pode ser acessada da seguinte maneira:
importar {computado} de'vue'
export default { configurar () { const store=useStore () Retorna { //acessa um estado na função computada contagem: computado (()=> store.state.count), //acessa um getter na função computada double: computed (()=> store.getters.double) } }
}
Comunidade e força do ecossistema
Pinia tem uma pequena comunidade no momento em que escrevo este artigo, o que resulta em poucas contribuições e menos soluções no Stack Overflow.
Devido à popularidade de Pinia no início do ano passado e ao progresso até agora, sua comunidade está crescendo rapidamente. Esperançosamente, haverá mais colaboradores e soluções em Pinia em breve.
Vuex, sendo a biblioteca de gerenciamento de estado recomendada pela equipe principal do Vue.js, tem uma grande comunidade com contribuições importantes dos membros da equipe principal. Soluções para bugs Vuex estão prontamente disponíveis no Stack Overflow.
Curva de aprendizado e documentação
Ambas as bibliotecas de gerenciamento de estado são bastante fáceis de aprender, uma vez que têm uma excelente documentação e recursos de aprendizagem no YouTube e em blogs de terceiros. Sua curva de aprendizado é mais fácil para desenvolvedores com experiência anterior em trabalhar com bibliotecas de arquitetura Flux como Redux, MobX, Recoil e muito mais.
As documentações das duas bibliotecas são excelentes e escritas de maneira amigável para desenvolvedores experientes e novos.
Avaliações do GitHub
No momento em que este artigo foi escrito, Pinia tinha dois lançamentos principais: v1 e v2, com a v2 tendo mais de 1,6 mil estrelas no GitHub . É indiscutivelmente uma das bibliotecas de gerenciamento de estado de crescimento mais rápido no ecossistema Vue.js, visto que foi lançada inicialmente em 2019 e é relativamente nova.
Enquanto isso, desde a data de criação do Vuex até agora, a biblioteca Vuex fez cinco lançamentos estáveis. Embora a v5 esteja em estágio experimental, a v4 da Vuex é a versão mais estável até agora e tem cerca de 26,3 mil estrelas no GitHub .
Desempenho
Tanto o Pinia quanto o Vuex são muito rápidos e, em alguns casos, seu aplicativo da web será mais rápido ao usar o Pinia em comparação com o Vuex. Este aumento de desempenho pode ser atribuído ao peso extremamente leve de Pinia. Pinia pesa cerca de 1 KB.
Embora o Pinia seja desenvolvido com suporte para ferramentas de desenvolvimento do Vue, alguns recursos como viagem no tempo e edição ainda não são compatíveis porque as ferramentas de desenvolvimento do Vue não expõem as APIs necessárias. Isso é importante notar quando a velocidade de desenvolvimento e depuração são mais preferenciais para o seu projeto.
Comparando Pinia 2 com Vuex 4
Pinia faz essas comparações com Vuex 3 e 4 :
-
Mutações não existem mais. Freqüentemente, eles eram considerados extremamente prolixos. Eles inicialmente trouxeram a integração do devtools, mas isso não é mais um problema.
-
Não há necessidade de criar wrappers complexos personalizados para suportar TypeScript, tudo é digitado e a API é projetada de forma a aproveitar a inferência de tipo TS tanto quanto possível.
Estas são percepções adicionais que Pinia faz na comparação entre sua biblioteca de gerenciamento de estado e a Vuex:
- Pinia não tem suporte para lojas aninhadas. Em vez disso, permite que você crie lojas conforme a necessidade. No entanto, as lojas ainda podem ser aninhadas implicitamente, importando e usando uma loja dentro de outra
- As lojas recebem namespaces automaticamente à medida que são definidas. Portanto, não há necessidade de criar namespaces explicitamente
- Pinia permite que você crie várias lojas e deixe seu código de bundler dividi-las automaticamente
- Pinia permite que getters sejam usados em outros getters
- Pinia permite o agrupamento de mudanças na linha do tempo do devtools usando
$ patch:this. $ patch ((state)=> { state.posts.push (post) state.user.postsCount ++ }) .catch (erro) { this.errors.push (erro) }
Comparando Pinia 2 (atualmente em alfa) com Vuex, podemos deduzir que Pinia está à frente de Vuex 4.
A equipe principal do Vue.js tem um RFC aberto para Vuex 5 semelhante ao usado por Pinia. Atualmente, a Vuex passa pelo RFC para reunir o máximo de feedback possível da comunidade. Esperançosamente, a versão estável do Vuex 5 superará o Pinia 2.
Segundo o criador do Pinia (Eduardo San Martin Morote), que também faz parte do núcleo do Vue.js equipe e participa ativamente do projeto de Vuex, Pinia e Vuex têm mais semelhanças do que diferenças:
Pinia tenta se manter o mais próximo possível da filosofia da Vuex. Ele foi projetado para testar uma proposta para a próxima iteração do Vuex e foi um sucesso, pois atualmente temos um RFC aberto para o Vuex 5 com uma API muito semelhante à usada por Pinia. Minha intenção pessoal com este projeto é redesenhar a experiência de usar uma Loja global, mantendo a filosofia acessível da Vue. Eu mantenho a API de Pinia tão próxima da Vuex, pois ela continua avançando para tornar mais fácil para as pessoas migrarem para Vuex ou até mesmo fundir os dois projetos (sob Vuex) no futuro.
Embora Pinia seja bom o suficiente para substituir Vuex, substituir Vuex não é seu objetivo, portanto, Vuex continua a ser a biblioteca de gerenciamento de estado recomendada para aplicativos Vue.js.
Vuex e Pinia Prós e Contras
Vuex Pros
- Oferece suporte a recursos de depuração, como viagem no tempo e edição
- Adequado para projetos Vue.js de grande escala e alta complexidade
Vuex Cons
- A partir do Vue 3, o resultado do getter não é armazenado em cache como a propriedade computada
- Vuex 4 tem alguns problemas associados à segurança de tipo
Pinia Pros
- Suporte completo a TypeScript: adicionar TypeScript é fácil em comparação com adicionar TypeScript em Vuex
- Extremamente leve (pesando cerca de 1 KB)
- As ações da loja são despachadas como chamadas de função regulares em vez de usar o método
dispatchou a função auxiliarMapAction, que é comum no Vuex - Tem suporte para várias lojas
- Tem suporte para Vue devtools, SSR e divisão de código do webpack
Pinia Contras
- Sem suporte para recursos de depuração, como viagem no tempo e edição
Quando usar Pinia e quando usar Vuex
Pela minha experiência pessoal, devido ao peso leve do Pinia, é adequado para aplicações de pequena e média escala. Também é adequado para projetos Vue.js de baixa complexidade, pois alguns recursos de depuração, como viagem no tempo e edição, ainda não são suportados.
Usar o Vuex para projetos Vue.js de pequena e média escala é um exagero porque seu peso contribui fortemente para a redução do desempenho. Portanto, Vuex é adequado para projetos Vue.js de grande escala e alta complexidade .
Conclusão
Neste artigo, fizemos comparações entre Vuex e Pinia e destacamos seus melhores recursos, documentação, força da comunidade, curvas de aprendizado e algumas armadilhas descobertas em ambas as bibliotecas no momento da escrita.
Vuex 4 e Pinia são semelhantes em muitos aspectos e podem ser usados para realizar as mesmas tarefas.
No geral, um não é melhor do que o outro-ambos alcançam o objetivo desejado. Tudo depende do seu caso de uso e preferência.
Além disso, tenha em mente que o criador do Pinia afirmou que o objetivo do Pinia não é substituir o Vuex. Em vez disso, o objetivo é tornar mais fácil para os desenvolvedores migrar para o Vuex ou até mesmo fundir os dois projetos (no Vuex) no futuro.
A postagem Pinia x Vuex: Pinia é um bom substituto para Vuex? apareceu primeiro no LogRocket Blog .
