0Pricing
Vue Academy · Aula

defineStore: estado, getters e ações

Store de opções versus store de Setup, estado como função, getters computados e ações assíncronas.

defineStore: estado, getters e ações é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 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 Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Os três pilares de um repositório

Um repositório de opções tem três partes: estado (os dados), acessadores (valores derivados) e ações (métodos que alteram o estado). Você define as três dentro de defineStore.

Definindo um repositório

defineStore recebe uma cadeia de identificador exclusiva e um objeto de opções. Ele retorna uma composição — por convenção, nomeada useXxxStore.

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  // state, getters, actions go here
})

O estado é uma função

A opção state deve ser uma função que retorna um objeto. Isso garante que cada instância do repositório receba um estado novo, assim como data() nos componentes.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Coddy' })
})

Lendo o estado

Chame a composição do repositório dentro de setup para obter uma instância e, em seguida, leia diretamente as propriedades do estado. Elas são reativas.

const counter = useCounterStore()
console.log(counter.count) // 0

Os acessadores são valores computados

getters são semelhantes às propriedades computed. Cada um recebe o state como primeiro argumento e retorna um valor derivado. Eles são armazenados em cache.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 2 }),
  getters: {
    doubled: (s) => s.count * 2
  }
})

Usando um acessador

Acesse um acessador como uma propriedade — sem parênteses. O Pinia o recalcula somente quando suas dependências mudam.

const counter = useCounterStore()
console.log(counter.doubled) // 4

Acessadores que referenciam outros acessadores

Para usar outro acessador, referencie this em vez do parâmetro de estado. Com this, não use uma função de seta.

getters: {
  doubled: (s) => s.count * 2,
  quadrupled() {
    return this.doubled * 2
  }
}

As ações alteram o estado

actions são métodos. Elas usam this para ler e alterar o estado diretamente. Sem commit, sem dispatch — basta chamar o método.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ },
    addBy(amount) { this.count += amount }
  }
})

Ações assíncronas

As ações podem ser async. Este é o lugar para fazer chamadas à API: busque os dados e atribua o resultado ao estado.

actions: {
  async loadUser(id) {
    const res = await fetch('/api/users/' + id)
    this.user = await res.json()
  }
}

Usando o repositório em um componente

Importe a composição, chame-a em <script setup> e use o estado, os acessadores e as ações no modelo.

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

<template>
  <p>{{ counter.count }} -> {{ counter.doubled }}</p>
  <button @click="counter.increment()">+</button>
</template>

Alterando vários campos

Para alterar vários campos do estado de uma só vez, use $patch. Ele agrupa as alterações em uma única entrada nas ferramentas de desenvolvimento.

counter.$patch({ count: 10, name: 'New' })

Verificação rápida

Teste seu conhecimento sobre a estrutura de um repositório de opções.

Recapitulação

Um repositório de opções tem três partes:

  • state: uma função que retorna o objeto de dados.
  • getters: valores derivados armazenados em cache, que recebem o estado (ou usam this).
  • actions: métodos que alteram o estado diretamente por meio de this.

Use o repositório chamando sua composição dentro de setup.

Perguntas Frequentes

A aula “defineStore: estado, getters e ações” é grátis?

Sim — o texto completo de “defineStore: estado, getters e ações” é 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 Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “defineStore: estado, getters e ações”?

Store de opções versus store de Setup, estado como função, getters computados e ações assíncronas. Você pratica Vue 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 Vue Academy?

Nenhuma experiência prévia é necessária. Vue 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 2 de 4.

Quanto tempo leva a aula “defineStore: estado, getters e ações”?

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 Vue Academy?

Sim. Cada aula de Vue 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

  1. Pinia vs Vuex: por que mudar
  2. defineStore: estado, getters e ações
  3. Composição de stores e acesso entre stores
  4. Persistência do Pinia e DevTools
← Voltar para Vue Academy