Vue Academy · Aula

Fundamentos do Vuex

Entenda a store do Vuex e o estado centralizado.

Fundamentos do Vuex é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 3. 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 3 aulas no total.

Por que usar um estado centralizado?

À medida que os aplicativos Vue crescem, compartilhar dados entre muitos componentes se torna trabalhoso. Passar propriedades para baixo e emitir eventos para cima por árvores profundamente aninhadas é frágil. O Vuex resolve isso com um armazenamento único e centralizado, que qualquer componente pode ler e modificar de maneira previsível.

A única fonte de verdade

O Vuex segue um fluxo de dados unidirecional. Todo o estado compartilhado do aplicativo fica em um único lugar chamado store. Os componentes leem o estado do store e solicitam alterações por meio de uma API controlada, para que você sempre saiba de onde os dados vêm e como eles são alterados.

Instalando o Vuex

O Vuex 4 é a versão criada para o Vue 3. Instale-o com o gerenciador de pacotes e depois crie e registre o store no seu app.

npm install vuex@4

Criando o store

Use createStore para definir um store. A opção state é uma função que retorna o objeto de estado reativo inicial.

import { createStore } from "vuex"

export const store = createStore({
  state() {
    return {
      count: 0,
      user: null
    }
  }
})

Registrando o store

Passe o store para seu app com app.use(store). Isso o disponibiliza para todos os componentes por meio de this.$store.

import { createApp } from "vue"
import App from "./App.vue"
import { store } from "./store"

const app = createApp(App)
app.use(store)
app.mount("#app")

A propriedade de estado

O objeto state contém os dados do seu aplicativo. Ele é reativo: quando o estado muda, qualquer componente que o utilize é renderizado novamente automaticamente. Pense nele como o data() de todo o seu app.

state() {
  return {
    todos: [],
    isLoading: false,
    theme: "light"
  }
}

Acessando o estado na API de Opções

Dentro de um componente, você acessa o store por meio de this.$store.state. Uma propriedade computada mantém o valor reativo.

export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}

Usando o estado no modelo

Depois de ser exposto por meio de uma propriedade computada, o estado é usado como qualquer valor local no modelo.

<template>
  <p>Current count: {{ count }}</p>
</template>

O auxiliar mapState

Escrever muitas propriedades computadas manualmente é repetitivo. O auxiliar mapState as gera para você a partir de uma matriz de nomes de estado.

import { mapState } from "vuex"

export default {
  computed: {
    ...mapState(["count", "user"])
  }
}

mapState com renomeação

Passe um objeto para mapState a fim de renomear propriedades ou calcular valores derivados do estado.

computed: {
  ...mapState({
    total: "count",
    userName: (state) => state.user ? state.user.name : "Guest"
  })
}

Acessando o estado na API de Composição

Com a API de Composição, chame useStore() dentro de setup para obter a instância do store e depois leia o estado por meio de uma propriedade computada.

import { computed } from "vue"
import { useStore } from "vuex"

export default {
  setup() {
    const store = useStore()
    const count = computed(() => store.state.count)
    return { count }
  }
}

Verificação rápida

Teste sua compreensão dos fundamentos do Vuex.

Recapitulação

O Vuex fornece um store centralizado e reativo como uma única fonte de verdade. Você o cria com createStore, registra-o por meio de app.use e lê o state por meio de propriedades computadas ou do auxiliar mapState. Na API de Composição, você acessa o store com useStore(). A seguir, você aprenderá a alterar esse estado com segurança.

Perguntas Frequentes

A aula “Fundamentos do Vuex” é grátis?

Sim — o texto completo de “Fundamentos do Vuex” é 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 3 aulas no total.

O que vou aprender em “Fundamentos do Vuex”?

Entenda a store do Vuex e o estado centralizado. 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 1 de 3.

Quanto tempo leva a aula “Fundamentos do Vuex”?

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

← Voltar para Vue Academy