Vuex

Módulos

Tente esta lição no Scrimba

Devido ao uso de uma única árvore de estado, todos os estados da nossa aplicação estão contidos dentro de um grande objeto. No entanto, à medida que nossa aplicação cresce em escala, o store pode ficar realmente inchado.

Para ajudar com isso, o Vuex nos permite dividir nosso store em módulos. Cada módulo pode conter seu próprio estado, mutações, ações, getters e até módulos aninhados - o padrão se repete em todo o fluxo abaixo:

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> `moduleA`'s state
store.state.b // -> `moduleB`'s state

Estado Local do Módulo

Dentro das mutações e getters de um módulo, o 1º argumento recebido será o estado local do módulo.

const moduleA = {
  state: () => ({
    count: 0
  }),
  mutations: {
    increment (state) {
      // `state` é o estado local do módulo
      state.count++
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

Da mesma forma, dentro das ações do módulo, context.state irá expor o estado local, e o estado raiz será exposto como context.rootState:

const moduleA = {
  // ...
  actions: {
    incrementIfOddOnRootSum ({ state, commit, rootState }) {
      if ((state.count + rootState.count) % 2 === 1) {
        commit('increment')
      }
    }
  }
}

Além disso, dentro do módulo getters, o estado raiz será exibido como seu 3º argumento:

const moduleA = {
  // ...
  getters: {
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  }
}

Namespacing

Por padrão, ações, mutações e getters dentro dos módulos ainda são registrados sob o namespace global - isso permite que vários módulos reajam ao mesmo tipo de ação/mutação.

Se você quer que seus módulos sejam mais independentes ou reutilizáveis, você pode usá-los com namespaces através do namespaced: true. Quando o módulo é registrado, todos os getters, ações e mutações terão automaticamente o namespace com base no caminho no qual o módulo está registrado. Por exemplo:

const store = createStore({
  modules: {
    account: {
      namespaced: true,

      // recursos do módulo
      state: () => ({ ... }), // o estado do módulo já está aninhado e não é afetado pela opção namespace
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },

      // módulos aninhados
      modules: {
        // herda o namespace do módulo pai
        myPage: {
          state: () => ({ ... }),
          getters: {
            profile () { ... } // -> getters['account/profile']
          }
        },

        // aninhar ainda mais o namespace
        posts: {
          namespaced: true,

          state: () => ({ ... }),
          getters: {
            popular () { ... } // -> getters['account/posts/popular']
          }
        }
      }
    }
  }
})

Os getters e as ações com namespace receberão getters, dispatch e commit localizados. Em outras palavras, você pode usar os recursos do módulo sem escrever prefixo no mesmo módulo. Alternar entre com namespace ou não, não afeta o código dentro do módulo.

Acessando Recursos Globais em Módulos com Namespaces

Se você quiser usar estado global e getters, rootState e rootGetters são passados como o 3º e 4º argumentos para funções getter, e também expostos como propriedades no objeto context passado para funções de ação.

Para despachar ações ou confirmar (ou fazer um commit de) mutações no namespace global, passe {root: true} como o 3º argumento para dispatch e commit.

modules: {
  foo: {
    namespaced: true,

    getters: {
      // `getters` está localizado nos getters deste módulo
      // você pode usar rootGetters como 4º argumento de getters
      someGetter (state, getters, rootState, rootGetters) {
        getters.someOtherGetter // -> 'foo/someOtherGetter'
        rootGetters.someOtherGetter // -> 'someOtherGetter'
        rootGetters['bar/someOtherGetter'] // -> 'bar/someOtherGetter'
      },
      someOtherGetter: state => { ... }
    },

    actions: {
      // dispatch e commit também estão localizados para este módulo
      // eles aceitarão a opção `root` para o dispatch/commit raiz
      someAction ({ dispatch, commit, getters, rootGetters }) {
        getters.someGetter // -> 'foo/someGetter'
        rootGetters.someGetter // -> 'someGetter'
        rootGetters['bar/someGetter'] // -> 'bar/someGetter'

        dispatch('someOtherAction') // -> 'foo/someOtherAction'
        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'

        commit('someMutation') // -> 'foo/someMutation'
        commit('someMutation', null, { root: true }) // -> 'someMutation'
      },
      someOtherAction (ctx, payload) { ... }
    }
  }
}

Registrar Ação Global em Módulos com Namespaces

Se você quiser registrar ações globais em módulos com namespaces, você pode marcá-lo com root: true e colocar a definição de ação na função handler. Por exemplo:

{
  actions: {
    someOtherAction ({dispatch}) {
      dispatch('someAction')
    }
  },
  modules: {
    foo: {
      namespaced: true,

      actions: {
        someAction: {
          root: true,
          handler (namespacedContext, payload) { ... } // -> 'someAction'
        }
      }
    }
  }
}

Vinculando Métodos Auxiliares com Namespace

Ao vincular um módulo com namespace aos componentes com os auxiliares mapState, mapGetters, mapActions e mapMutations, ele pode ficar um pouco verboso:

computed: {
  ...mapState({
    a: state => state.some.nested.module.a,
    b: state => state.some.nested.module.b
  }),
  ...mapGetters([
    'some/nested/module/someGetter', // -> this['some/nested/module/someGetter']
    'some/nested/module/someOtherGetter', // -> this['some/nested/module/someOtherGetter']
  ])
},
methods: {
  ...mapActions([
    'some/nested/module/foo', // -> this['some/nested/module/foo']()
    'some/nested/module/bar' // -> this['some/nested/module/bar']()
  ])
}

Nesses casos, você pode passar a String do namespace do módulo como o 1º argumento para os métodos auxiliares, de modo que todas as ligações sejam feitas usando esse módulo como o contexto. O acima pode ser simplificado para:

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  }),
  ...mapGetters('some/nested/module', [
    'someGetter', // -> this.someGetter
    'someOtherGetter', // -> this.someOtherGetter
  ])
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

Além disso, você pode criar métodos auxiliares com namespace usando createNamespacedHelpers. Ele retorna um objeto com novos métodos auxiliares dos componentes vinculados ao valor do namespace fornecido:

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

export default {
  computed: {
    // procura em `some/nested/module`
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // procura em `some/nested/module`
    ...mapActions([
      'foo',
      'bar'
    ])
  }
}

Advertência para Desenvolvedores de Plug-ins

Você pode se preocupar com namespacing imprevisível para seus módulos ao criar um [plugin] (plugins.md) que fornece os módulos e permite que os usuários os adicionem a um store Vuex. Seus módulos também terão namespaces se os usuários do plugin adicionarem seus módulos em um módulo com namespace. Para se adaptar a essa situação, pode ser necessário receber um valor de namespace por meio das opções do seu plugin:

// obtem valor do namespace via opção do plugin
// e retorna a função plugin do Vuex
export function createPlugin (options = {}) {
  return function (store) {
    // adiciona namespace aos tipos de módulos do plugin
    const namespace = options.namespace || ''
    store.dispatch(namespace + 'pluginAction')
  }
}

Registro de Módulo Dinâmico

Você pode registrar um módulo após o store ser criado com o método store.registerModule:

import { createStore } from 'vuex'

const store = createStore({ /* options */ })

// registra um módulo `myModule`
store.registerModule('myModule', {
  // ...
})

// registra um módulo aninhado `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})

Os estados do módulo serão expostos como store.state.myModule e store.state.nested.myModule.

O registro de módulo dinâmico possibilita que outros plugins Vue aproveitem também o Vuex para gerenciamento de estado, anexando um módulo ao store da aplicação. Por exemplo, a biblioteca vuex-router-sync integra o vue-router com o vuex gerenciando o estado da rota da aplicação em um módulo conectado dinamicamente.

Você também pode remover um módulo dinamicamente registrado com o store.unregisterModule(moduleName). Note que você não pode remover módulos estáticos (declarados na criação do store) com este método.

Observe que você pode verificar se o módulo já está registrado no store ou não através do método store.hasModule (moduleName).

Preservando o estado

É bem provável que você queira preservar o estado anterior ao registrar um novo módulo, como preservar o estado de uma aplicação Renderizada no Lado do Servidor (Server Side Rendered). Você pode fazer isso com a opção preserveState:store.registerModule('a', module, {preserveState: true})

Quando você define preserveState: true, o módulo é registrado, as ações, mutações e getters são incluídos no store, mas o estado não. É assumido que estado da sua store já contém um estado para aquele módulo e você não quer sobrescrevê-lo.

Reutilização do Módulo

Às vezes, podemos precisar criar várias instâncias de um módulo, por exemplo:

Se usarmos um objeto simples para declarar o estado do módulo, esse objeto de estado será compartilhado por referência e causará poluição entre estados de store/módulo quando ele sofrer uma mutação.

Este é exatamente o mesmo problema com data dentro dos componentes Vue. Então, a solução também é a mesma - use uma função para declarar o estado do módulo (suportado em 2.3.0+):

const MyReusableModule = {
  state: () => ({
    foo: 'bar'
  }),
  // mutations, actions, getters...
}