Vuex

API de Composição (ou Composition API)

Para acessar o store dentro do gatilho (ou hook) setup, você pode chamar a função useStore. Isso é o equivalente a recuperar this.$store dentro de um componente usando a API de Opções (ou Option API).

import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()
  }
}

Acessando Estado e Getters

Para acessar o estado e os getters, você deve criar referências computed para reter a reatividade. Isso é o equivalente a criar dados computados usando a API de Opções (ou Option API).

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

export default {
  setup () {
    const store = useStore()

    return {
      // acessar um estado em uma função de dados computados
      count: computed(() => store.state.count),

      // acessar um getter em uma função de dados computados
      double: computed(() => store.getters.double)
    }
  }
}

Acessando Mutações e Ações

Ao acessar mutações e ações, você pode simplesmente fornecer as funções commit e dispatch dentro do gatilho (ou hook) setup.

import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()

    return {
      // acessa uma mutação
      increment: () => store.commit('increment'),

      // acessa uma ação
      asyncIncrement: () => store.dispatch('asyncIncrement')
    }
  }
}

Exemplos

Confira o exemplo da API de Composição para ver exemplos de aplicações que utilizam Vuex e a API de Composição (ou Composition API) do Vue.