Uma introdução ao Pinia em Vue.js

Crie aplicativos simples e baseados em estado com facilidade usando esta biblioteca JavaScript.

Principais conclusões

Você é um desenvolvedor Vue que deseja agilizar seu gerenciamento de estado e levar o desenvolvimento de seu aplicativo a novos patamares? Diga olá à Pinia, a biblioteca revolucionária de gerenciamento de estado para entusiastas do Vue.

Dê uma olhada passo a passo nos principais conceitos do Pinia e veja como você pode desbloquear 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 criada para Vue, projetada para trazer simplicidade e eficiência incomparáveis aos seus projetos Vue. Desenvolvido para fornecer uma experiência perfeita para desenvolvedores Vue, Pinia se inspira nas melhores práticas de gerenciamento de estado moderno, ao mesmo tempo que é extremamente leve e fácil de integrar em seus aplicativos.

A filosofia por trás do Pinia é manter as coisas minimalistas e elegantes, facilitando o gerenciamento do estado do aplicativo pelos desenvolvedores. Adotando uma abordagem simples e intuitiva, Pinia permite que você se concentre no que é mais importante e oferece uma experiência de usuário excepcional ao construir seu aplicativo Vue.

Conceitos Básicos de Pinia

Para aproveitar ao máximo o Pinia, é fundamental compreender 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 modificar o estado da loja executando operações assíncronas ou síncronas. Eles servem como ponte entre os componentes do seu aplicativo e a loja, garantindo que as mutações de estado sigam padrões previsíveis e sigam as práticas recomendadas.

Loja

A loja representa o coração do Pinia, encapsulando o estado, getters, ações e mutações do aplicativo (se houver). Ele atua como uma única fonte de verdade, mantendo o estado do 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 ao usuário. Ao usar o objeto de estado no armazenamento, você pode gerenciar e compartilhar dados entre componentes de maneira transparente.

E quanto ao Vuex?

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

Pinia utiliza o sistema de reatividade do Vue para gerenciar o estado, evitando a necessidade de quaisquer dependências externas. Isto significa que o ecossistema Pinia está mais focado e evita um potencial inchaço. Além disso, a digitação estrita e o suporte 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 pensando em migrar do Vuex, Pinia oferece uma alternativa atraente que agiliza o gerenciamento de estado sem comprometer a flexibilidade ou o desempenho.

Aplicativo Vue simples usando Pinia

Para saber tudo sobre Pinia, tente criar um aplicativo de exemplo; um gerenciador de lista de tarefas básico é um bom candidato. Um aplicativo de lista de tarefas possui uma estrutura simples onde os usuários podem adicionar tarefas, marcar e indicar sua conclusão e excluir e editar tarefas conforme necessário. Pinia fornece as ferramentas necessárias para gerenciar o estado de tais aplicações.

Pré-requisitos

Primeiro 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 Vue 3 nas configurações padrão; este exemplo continuará usando o Vue 3.

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

cd pinia-todo-app
npm install pinia

Configure seus arquivos

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

Primeiro, crie um arquivo chamado store.js na pasta src. Este arquivo irá armazenar, adicionar e excluir itens que você adicionará à lista de tarefas. Ele fará tudo isso usando os conceitos básicos do Pinia.

// src/store.js
import { defineStore } from "pinia";
export const 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, este arquivo por si só não é suficiente. Você precisa vincular o arquivo store.js com App.vue. Para fazer isso, altere o arquivo src/App.vue da seguinte forma:

// src/App.vue
<script>
import { useTodoStore } from './store';
export default {
 data() {
   return {
     todoText: '',
   };
 },
 computed: {
   todos() {
     return useTodoStore().todos;
   },
 },
 methods: {
   addTodo() {
     if (this.todoText.trim() !== '') {
       useTodoStore().addTodo(this.todoText);
       this.todoText = '';
     }
   },
   removeTodo(todoId) {
     useTodoStore().removeTodo(todoId);
   },
 },
};
</script>

A lógica aqui é bastante simples. Os eventos definidos em store.js acontecerão conforme especificado no arquivo App.vue. É como se o arquivo App.vue atuasse como seu mecanismo de controle.

Claro, desta forma este aplicativo não significa nada porque você não usou nenhum modelo ou estilo. Para adicioná-los, você pode modificar o arquivo App.vue da seguinte maneira.

// src/App.vue
<template>
 <div>
   <h1>My Pinia Todo List</h1>
   <input v-model="todoText" @keyup.enter="addTodo"
    placeholder="What is your goal?" />
   <ul>
     <li v-for="todo in todos" :key="todo.id">
       {{ todo.text }} <button @click="removeTodo(todo.id)">Done!</button>
     </li>
   </ul>
 </div>
</template>
<script>
import { useTodoStore } from './store';
export default {
 data() {
   return {
     todoText: '',
   };
 },
 computed: {
   todos() {
     return useTodoStore().todos;
   },
 },
 methods: {
   addTodo() {
     if (this.todoText.trim() !== '') {
       useTodoStore().addTodo(this.todoText);
       this.todoText = '';
     }
   },
   removeTodo(todoId) {
     useTodoStore().removeTodo(todoId);
   },
 },
};
</script>
<style>
// Your styles...
</style>

Agora você tem tudo que precisa. Usando os recursos do conceito central do Pinia, você poderá verificar o status e adicionar e excluir novos itens da lista de tarefas conforme desejar. Mas ainda resta um último passo. Você deve atualizar o arquivo main.js na pasta src e incluir os necessários para a aplicação.

// src/main.js
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
const pinia = createPinia();
const app = createApp(App);
app.use(pinia);
app.mount("#app");

Tudo o que é necessário para testar o aplicativo está ok.

Execute o aplicativo Pinia de exemplo

Para ver o resultado desta lista de tarefas simples, mas instrutiva, use este comando:

npm run serve

Você verá uma interface simples e limpa para adicionar e remover tarefas:

Quão útil é Pinia?

Pinia deve ser uma ferramenta valiosa se você procura um fluxo de dados suave e eficiente em seus aplicativos. Ao oferecer reatividade, segurança de tipo e arquitetura modular, Pinia simplifica o gerenciamento de estado e aumenta a produtividade.

Com sua documentação clara e suporte ativo da comunidade, adotar o Pinia pode ser uma escolha sábia, permitindo criar aplicativos Vue escaláveis e de fácil manutenção com facilidade.