Pinia para Vue: defineStore e storeToRefs
Defina um armazenamento Pinia com defineStore, acesse-o nos componentes e use storeToRefs para manter a reatividade ao desestruturar o estado.
Pinia para Vue: defineStore e storeToRefs é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que é Pinia?
Pinia é a biblioteca oficial de gerenciamento de estado para o Vue 3. Ela substitui o Vuex com uma API mais simples, segura quanto aos tipos e integrada ao DevTools, que se comporta como a Composition API.
Instalando o Pinia
Instale e registre o plugin Pinia no app Vue.
npm install pinia
// main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
app.use(createPinia());
app.mount('#app');defineStore — Estilo da Composition API
defineStore cria um store. O estilo da Composition API usa ref, computed e funções diretamente — assim como um composable.
// stores/counter.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
export const useCounterStore = defineStore('counter', () => {
const count = ref(0);
const doubled = computed(() => count.value * 2);
function increment() { count.value++; }
return { count, doubled, increment };
});defineStore — Estilo da Options API
O estilo de opções reproduz a Options API do Vue: state() para dados reativos, getters (como computed) e actions (como methods).
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
getters: {
doubled: (state) => state.count * 2,
},
actions: {
increment() { this.count++; },
async fetchAndSet(id: string) {
this.count = await fetchCount(id);
}
}
});Usando um store em um componente
Chame o gancho do store dentro de setup(). O store é um objeto reativo — você pode ler o estado e chamar ações diretamente.
<script setup>
import { useCounterStore } from '@/stores/counter';
const store = useCounterStore();
</script>
<template>
<p>{{ store.count }}</p>
<button @click="store.increment">+</button>
</template>storeToRefs — Desconstrução segura
A desconstrução direta de um store faz o estado e os getters perderem a reatividade (eles se tornam valores simples). Use storeToRefs() para desconstruí-los de forma reativa.
import { storeToRefs } from 'pinia';
const store = useCounterStore();
// Actions can be destructured normally (they're functions):
const { increment } = store;
// State and getters need storeToRefs:
const { count, doubled } = storeToRefs(store);$patch — Atualizações em lote
store.$patch() aplica várias alterações de estado como uma única operação. É útil para agrupar atualizações relacionadas.
store.$patch({
count: 10,
name: 'Updated'
});
// Or with a function for complex logic:
store.$patch(state => {
state.items.push(newItem);
state.total += newItem.price;
});$subscribe — Observando alterações no store
store.$subscribe(callback) reage a qualquer mutação do store, de forma semelhante ao watch do Vue, mas para o store inteiro.
Plugins do Pinia
Plugins do Pinia estendem todos os stores. Usos comuns: persistir o estado no localStorage, adicionar registros de depuração ou injetar serviços.
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);DevTools do Pinia
O Pinia integra-se ao Vue DevTools. Você pode inspecionar o estado dos repositórios, ver quais ações foram chamadas e avançar ou retroceder entre instantâneos do estado.
Vários repositórios
Crie um repositório por domínio (useAuthStore, useCartStore, useNotificationStore). Os repositórios podem importar e usar uns aos outros. A estrutura plana do Pinia (sem módulos aninhados) simplifica isso.
Verificação rápida
Por que você deve usar storeToRefs() ao desestruturar um repositório do Pinia?
Recapitulação: Pinia
defineStore cria repositórios. Estilo da API de composição ou de opções. Acesso pelo gancho useXxxStore(). Use storeToRefs() para desestruturar mantendo a reatividade. $patch() para atualizações agrupadas. Plugins para persistência e outras extensões. Integração com DevTools. Um repositório por domínio — sem módulos aninhados no estilo do Vuex.
Perguntas Frequentes
A aula “Pinia para Vue: defineStore e storeToRefs” é grátis?
Sim — o texto completo de “Pinia para Vue: defineStore e storeToRefs” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Pinia para Vue: defineStore e storeToRefs”?
Defina um armazenamento Pinia com defineStore, acesse-o nos componentes e use storeToRefs para manter a reatividade ao desestruturar o estado. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Pinia para Vue: defineStore e storeToRefs”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Redux Toolkit: createSlice e configureStore
- Zustand para estado leve no React
- Pinia para Vue: defineStore e storeToRefs
- Quando usar estado global ou local