Conclusão primeiro:
Pinia é uma nova biblioteca de gerenciamento estadual desenvolvida pela equipe oficial do Vue . O núcleo é resolver os problemas de comunicação e compartilhamento de dados entre os componentes.
A diferença entre ele e o Vuex é que embora seja semelhante ao Vuex, o Pinia é mais simples e intuitivo de usar . Como Pinia é baseado no estilo API combinado do Vue3 e também oferece suporte a TypeScript ;
Outra diferença é que Pinia é mais leve e compacta em um tamanho bem pequeno. Porque Pinia não utiliza mais alguns conceitos complexos de Vuex, como módulos e mutações ;
Além disso, Pinia também pode usar cada loja de maneira flexível e plana, enquanto o Vuex oferece suporte apenas a uma instância de loja.
Análise específica:
Redux, Vuex e Pinia são estruturas populares para gerenciamento de estado. Suas principais diferenças são as seguintes:
1、Abacaxi
documento:
Pinia é uma nova biblioteca de gerenciamento de estado especialmente desenvolvida pelos membros da equipe oficial do Vue , e a biblioteca oficial de gerenciamento de estado do Vue foi alterada para Pinia.
Também é introduzido no armazém oficial da Vuex que Pinia pode ser considerada como Vuex 5 com um nome diferente , o que também significa que não haverá mais uma versão 5.
Comparado ao Vuex, o Pinia fornece uma API mais simples baseada na API de composição do Vue3 , facilitando a escrita de lógica e código reutilizáveis ;
Mais importante ainda, Pinia usa objetos Proxy nativos em vez de Object.defineProperty, tornando Pinia mais rápido e eficiente.
vantagem:
① Mais leve, apenas 1,6kb é enviado após a compactação
② Suporte completo a TS, o código-fonte do Pinia é totalmente codificado por TS
Pinia tem suporte confiável para julgamento de tipo quando usado com TypeScript ; o suporte anterior do Vuex para TS era muito hostil;
③ Remova as mutações, deixando apenas estados, ações e getters.
Equivalente aos dados, métodos e componentes computados;
Depois que a loja for instanciada, quaisquer propriedades definidas em estado, getters e ações poderão ser acessadas diretamente na loja;
Ao usar Vuex, mudar o estado requer esforço para escolher mutação ou ação; e eles originalmente trouxeram integração com devtools, mas isso não é mais um problema ~~
Todas as operações de toda a instância da loja podem ser acessadas por meio disso em getters e ações ;
④ Não existe mais uma estrutura aninhada de módulos, cada Loja pode ser usada de forma flexível e cada uma pode ser usada de maneira plana;
Não há necessidade de adicionar manualmente cada loja, seus módulos são cadastrados automaticamente por padrão.
Antes do Vuex, os dados não eram suficientemente planos e o tempo de chamada era muito longo;
Uma Loja (como Pinia) é uma entidade que contém o estado e a lógica de negócio da árvore de componentes, ou seja, salva o estado global;
Qualquer número de Lojas pode ser definido na aplicação para gerenciar o estado;
⑤ Não haverá mais o conceito de namespaces e não há necessidade de lembrar seus relacionamentos complexos.
⑥ Suporte para renderização do lado do servidor (SSR)
⑦ Mecanismo de divisão de código mais amigável
⑧ Fornece persistência do estado Pinia
Posicionamento | pinia-plugin-persistedstate
pinia-plugin-estado persistente
2, Vuex
Compreendendo o blog Vuex-CSDN
- Vuex é uma biblioteca de gerenciamento de estado especialmente projetada para Vue.js e pode ser facilmente integrada a aplicativos Vue.js.
- Vuex abstrai o estado compartilhado de todos os componentes do aplicativo em uma única árvore de estado e modifica o estado usando ações e mutações.
- Vuex fornece uma API rica, como gerenciamento avançado de estado, plug-ins e modularização.
3. Reduxar
- Redux é um contêiner de estado JavaScript independente do React e também pode ser integrado a outras bibliotecas de visualização.
- O conceito central do Redux é uma Fonte Única de Verdade, ou seja, todos os estados da aplicação existem em um único repositório, e o estado é modificado por meio de Pure Functions.
- Redux fornece um sistema de gerenciamento de estado previsível para aplicativos, e o mesmo se aplica ao SSR.
4. Resumo
Em resumo, Redux, Vuex e Pinia fornecem uma solução de gerenciamento de estado previsível e têm suas próprias vantagens exclusivas.
Pinia é adequada para desenvolvedores que desejam uma biblioteca de gerenciamento de estado simples e leve, enquanto Vuex é adequada para desenvolvedores que exigem mais recursos e flexibilidade.
Qual você escolher depende de fatores como a complexidade do seu aplicativo, o nível de habilidade da sua equipe de desenvolvimento e a preferência pessoal.
Se for um projeto Vue.js 3, você pode considerar usar Pinia, caso contrário, você pode considerar Vuex ou Redux.