Uma introdução ao Pinia no Vue.js

Principais conclusões

• Pinia é uma biblioteca de gerenciamento de estado para Vue que traz simplicidade e eficiência ao desenvolvimento de aplicativos, com foco no minimalismo e em uma abordagem intuitiva.
• Os principais conceitos da Pinia incluem getters, ações, armazenamento e estado, que permitem aos desenvolvedores gerenciar e compartilhar dados de forma eficaz em seus componentes Vue.
• Comparado ao Vuex, o Pinia oferece uma abordagem mais moderna e minimalista, usando o sistema de reatividade do Vue e fornecendo digitação rígida e suporte a TypeScript para aplicativos mais robustos e com menos bugs. É uma opção viável para novos projetos ou migração do Vuex.

Você é um desenvolvedor Vue procurando simplificar seu gerenciamento de estado e levar o desenvolvimento de seu aplicativo a novos patamares? Diga olá ao Pinia, a biblioteca de gerenciamento de estado revolucionária para os entusiastas do Vue.

Dê uma olhada passo a passo nos principais conceitos de Pinia e veja como você pode liberar seu potencial. Descubra como esta biblioteca se compara ao Vuex e aprenda como criar um aplicativo Pinia simples.

O que é Pínia?

Pinia é uma biblioteca de gerenciamento de estado especialmente feito para Vue, projetado para trazer simplicidade e eficiência incomparáveis ​​aos seus projetos Vue. Desenvolvido para fornecer uma experiência perfeita para desenvolvedores Vue, o Pinia se inspira nas melhores práticas de gerenciamento de estado moderno, sendo extremamente leve e direto para integrar em seus aplicativos.

A filosofia por trás do Pinia é manter as coisas mínimas e elegantes, tornando fácil para os desenvolvedores gerenciar o estado do aplicativo. Adotando uma abordagem simples e intuitiva, o Pinia permite que você se concentre no que é mais importante e ofereça uma experiência de usuário excepcional ao criar seu aplicativo Vue.

Conceitos centrais do Pinia

Para tirar o máximo proveito do Pinia, é essencial entender seus conceitos básicos.

Getters

Getters em Pinia são responsáveis ​​por extrair e retornar valores específicos do estado da loja. Ao definir getters, você pode acessar e processar dados com eficiência sem manipular diretamente o estado subjacente. Pense neles como propriedades computadas adaptadas ao estado da sua loja.

Ações

As ações desempenham um papel crucial no Pinia, permitindo que você modifique o estado da loja executando operações assíncronas ou síncronas. Eles servem como ponte entre os componentes de seu aplicativo e a loja, garantindo que as mutações de estado sigam padrões previsíveis e sigam as melhores práticas.

Loja

A loja representa o coração do Pinia, encapsulando o estado, os getters, as ações e as mutações (se houver) do aplicativo. Ele atua como uma única fonte de verdade, mantendo o estado de seu aplicativo centralizado e facilmente acessível em todos os seus componentes.

Estado

Estado refere-se aos dados que sua loja gerencia. São os dados reativos dos quais seus componentes dependem para exibir as informações mais atualizadas para o usuário. Ao usar o objeto de estado dentro da loja, você pode gerenciar e compartilhar dados de forma transparente entre os componentes.

E o Vuex?

Você pode estar se perguntando como Pinia se compara ao Vuex, que tem sido uma biblioteca de gerenciamento de estado para desenvolvedores Vue por algum tempo. Enquanto o Vuex é, sem dúvida, uma solução robusta e poderosa, o Pinia se diferencia com uma abordagem mais moderna e minimalista.

Pinia usa o sistema de reatividade do Vue para gerenciar o estado, evitando a necessidade de quaisquer dependências externas. Isso significa que o ecossistema Pinia é mais focado e evita possíveis inchaços. Além disso, a digitação estrita e o suporte a TypeScript que ele fornece permitem detectar erros no início do processo de desenvolvimento, levando a aplicativos mais robustos com menos bugs.

Se você está iniciando um novo projeto Vue ou considerando migrar do Vuex, o Pinia oferece uma alternativa atraente que agiliza o gerenciamento de estado sem comprometer a flexibilidade ou o desempenho.

Aplicativo Vue simples usando Pinia

Para aprender tudo sobre o Pinia, tente criar um aplicativo de amostra; a gerenciador básico de lista de tarefas é um bom candidato. Um aplicativo de lista de tarefas tem uma estrutura simples onde os usuários podem adicionar tarefas pendentes, marcar e indicar sua conclusão e excluir e editar trabalhos conforme necessário. O Pinia fornece as ferramentas necessárias para gerenciar o estado de tais aplicativos.

Pré-requisitos

Antes de tudo, você precisa preparar o ambiente necessário para este projeto, começando pelo Vue CLI.

# To install Vue CLI:
npm install -g @vue/cli
# To create the project folder with Vue CLI:
vue create pinia-todo-app

Nesta fase, você pode ver no terminal que precisa selecionar uma predefinição. Você pode continuar selecionando Visualização 3 das configurações padrão; este exemplo vai continuar usando o Vue 3.

Agora você pode instalar o Pinia na pasta do seu projeto:

cd pinia-todo-app
npm install pinia

Configurar seus arquivos

Você só precisa editar alguns arquivos para concluir este projeto de amostra.

Primeiro, crie um arquivo chamado loja.js debaixo de origem pasta. Este arquivo manterá, adicionará e excluirá itens que você adicionará à lista de tarefas. Ele fará tudo isso usando os principais conceitos do Pinia.

// src/store.js
import { defineStore } from"pinia";
exportconst useTodoStore = defineStore("todo", {
 state: () => ({
 todos: [],
 }),
 actions: {
 addTodo(todoText) {
this.todos.push({ id: Date.now(), text: todoText });
 },
 removeTodo(todoId) {
this.todos = this.todos.filter((todo) => todo.id !== todoId);
 },
 },
});

Mas, é claro, esse arquivo sozinho não é suficiente. Você precisa vincular o loja.js arquivo com App.vue. Para isso, altere o src/App.vue arquivo da seguinte forma:

// src/App.vue