Vuex

# Referência da API

# Vuex.Store

import Vuex from 'vuex'

const store = new Vuex.Store({ ...options })

# Vuex.Store Opções do Construtor

# estado

  • type: Object | Function

    O objeto raiz de estado para o store Vuex. Detalhes

    Se você passar uma função que retorna um objeto, o objeto retornado é usado como o estado da raiz. Isso é útil quando você deseja reutilizar o objeto de estado, especialmente para reutilização de módulos. Detalhes

# mutações

  • type: { [type: string]: Function }

    Registra mutações no store. A função do manipulador sempre recebe estado como o 1º argumento (será o estado local do módulo se definido em um módulo) e receberá um 2º argumento payload se houver um.

    Detalhes

# ações

  • type: { [type: string]: Function }

    Registra ações no store. A função do manipulador recebe um objeto context que expõe as seguintes propriedades:

    {
  state,      // o mesmo que `store.state`, ou estado local se estiver em módulos
  rootState,  // o mesmo que `store.state`, apenas em módulos
  commit,     // o mesmo que `store.commit`
  dispatch,   // o mesmo que `store.dispatch`
  getters,    // o mesmo que `store.getters`, ou com getters locais se estiver em módulos
  rootGetters // o mesmo que `store.getters`, apenas em módulos
}

    E também recebe um 2º argumento payload se houver um.

    Detalhes

# getters

  • type: { [key: string]: Function }

    Registra getters no store. A função getter recebe os seguintes argumentos:

    state,     // será estado local do módulo se definido em um módulo.
getters    // o mesmo que store.getters

    Específico quando definido em um módulo

    state,       // será estado local do módulo se definido em um módulo.
getters,     // módulo de getters locais do módulo atual
rootState,   // estado global
rootGetters  // todos os getters

    Os getters registrados estão expostos em store.getters.

    Detalhes

# módulos

  • type: Object

    Um objeto contendo sub módulos a serem incorporados no store, de forma que:

    {
  key: {
    state,
    namespaced?,
    mutations?,
    actions?,
    getters?,
    modules?
  },
  ...
}

    Cada módulo pode conter estado e mutações semelhantes às opções raiz. O estado de um módulo será anexado ao estado da raiz do store usando a chave do módulo. As mutações e getters de um módulo receberão apenas o estado local do módulo como o 1º argumento em vez do estado da raiz e as ações do módulo context.state também apontarão para o estado local.

    Detalhes

# plugins

  • type: Array<Function>

    Um Array de funções de plug-in a serem aplicadas no store. O plug-in simplesmente recebe o store como o único argumento e pode ouvir mutações (para persistência de dados de saída, registro ou depuração) ou mutações de despacho (para dados de entrada, por exemplo, websockets ou observables).

    Detalhes

# strict

  • type: boolean

  • default: false

    Força o store Vuex em modo estrito. No modo estrito, qualquer mutação ao estado do Vuex fora dos manipuladores de mutação acusará um erro.

    Detalhes

# devtools

  • type: boolean

    Ative ou desative as ferramentas de desenvolvedor para uma determinada instância vuex. Passar false à instância diz ao store Vuex para não se integrar ao devtools. Útil para quando se tem vários stores em uma single page.

    {
  devtools: false
}

# Vuex.Store Propriedades da Instância

# state

  • type: Object

    O estado raiz. Apenas leitura.

# getters

  • type: Object

    Expõe os getters registrados. Apenas leitura.

# Vuex.Store Métodos da Instância

# commit

  • commit(type: string, payload?: any, options?: Object)
  • commit(mutation: Object, options?: Object)

Confirma (ou faz um Commit de) uma mutação. options pode ter root: true que permite confirmar mutações da raiz em módulos namespaced. Detalhes

# dispatch

  • dispatch(type: string, payload?: any, options?: Object): Promise<any>
  • dispatch(action: Object, options?: Object): Promise<any>

Despacha uma ação. options pode ter root: true que permite despachar ações para raiz em módulos namespaced. Retorna um Promise que resolve todos os manipuladores de ação acionados. Detalhes

# replaceState

  • replaceState(state: Object)

Substitua o estado da raiz do store. Use isso apenas para fins de hydration / time-travel.

# watch

  • watch(fn: Function, callback: Function, options?: Object): Function

Visualiza de forma reativa um valor de retorno de fn, e chama o callback para o retorno de chamada quando o valor for alterado. O fn recebe o estado do store como o 1º argumento, e os getters como o 2º argumento. Aceita um objeto de opções opcional que leva as mesmas opções que o método vm.$watch do Vue.

Para parar um watch, chame a função unwatch retornada.

# subscribe

  • subscribe(handler: Function): Function

Assina as mutações do store. O manipulador é chamado após cada mutação e recebe o descritor de mutação e o estado pós-mutação como argumentos:

store.subscribe((mutation, state) => {
  console.log(mutation.type)
  console.log(mutation.payload)
})

Para cancelar a assinatura, chame a função unsubscribe retornada.

Mais comumente usado em plugins. Detalhes

# subscribeAction

  • subscribeAction(handler: Function): Function

Novo na 2.5.0

Assina as ações do store. O manipulador é chamado para cada ação despachada e recebe o descritor de ação e o estado atual do store como argumentos:

store.subscribeAction((action, state) => {
  console.log(action.type)
  console.log(action.payload)
})

Para cancelar a assinatura, chame a função unsubscribe retornada.

Novo em 3.1.0

A partir da 3.1.0, subscribeAction também pode especificar se o manipulador do subscribe deve ser chamado antes de ou depois de um despacho de ação (o comportamento padrão é antes):

store.subscribeAction({
  before: (action, state) => {
    console.log(`antes da action ${action.type}`)
  },
  after: (action, state) => {
    console.log(`depois da action ${action.type}`)
  }
})

Mais comumente usado em plugins. Detalhes

# registerModule

  • registerModule(path: string | Array<string>, module: Module, options?: Object)

Registra um módulo dinâmico. Detalhes

options can have preserveState: true que permite preservar o estado anterior. Útil com renderização do lado do servidor (server-side-rendering).

# unregisterModule

  • unregisterModule(path: string | Array<string>)

Cancela o registro de um módulo dinâmico. Detalhes

# hotUpdate

  • hotUpdate(newOptions: Object)

Faz Hot swap de novas ações e mutações. Detalhes

# Métodos Auxiliares dos Componentes

# mapState

  • mapState(namespace?: string, map: Array<string> | Object<string | function>): Object

Criar dados computados do componente que retornam a subárvore do store Vuex. Detalhes

O 1º argumento pode ser opcionalmente uma String com namespace. Detalhes

O segundo objeto que compõem os argumentos pode ser uma função. function(state: any)

# mapGetters

  • mapGetters(namespace?: string, map: Array<string> | Object<string>): Object

Criar dados computados do componente que retornam o valor calculado de um getter. Detalhes

O 1º argumento pode ser opcionalmente uma String com namespace. Detalhes

# mapActions

  • mapActions(namespace?: string, map: Array<string> | Object<string | function>): Object

Criar opções de métodos nos componentes que despacham uma ação. Detalhes

O 1º argumento pode ser opcionalmente uma String com namespace. Detalhes

O segundo objeto que compõem os argumentos pode ser uma função. function(dispatch: function, ...args: any[])

# mapMutations

  • mapMutations(namespace?: string, map: Array<string> | Object<string | function>): Object

Criar opções de métodos nos componentes que confirmam (ou fazem um commit de) uma mutação. Detalhes

O 1º argumento pode ser opcionalmente uma String com namespace. Detalhes

O segundo objeto que compõem os argumentos pode ser uma função. function(commit: function, ...args: any[])

# createNamespacedHelpers

  • createNamespacedHelpers(namespace: string): Object

Cria um componente namespaced dos métodos auxiliares. O objeto retornado possui mapState, mapGetters, mapActions e mapMutations, que estão conectados com o dado namespace. Detalhes