Vuex in Nuxt: Breaking down the Store into Modules

  • Modules: every .js file inside the store directory is transformed as a namespaced module (index being the root module).
  1. loading.js
  2. services.js

Updating Vuex Store Methods

Now that the code is in Modules, all methods that may have been used in components to interact with mutations, actions, getters, and state in the old store/index.js will have to be updated. For example, the getServices action could be dispatched in Classic mode by using:

dispatch("getServices")
dispatch("services/getServices")

Vuex Map Helpers

When a component needs to make use of multiple store state properties or getters, declaring all these computed properties can get repetitive and verbose. To deal with this we can make use of the mapState helper which generates computed getter functions for us, saving us some keystrokes: For example, instead of using:

this.$store.dispatch("deleteService", payload)
  1. Inside of the methods object of your component, add the mapper:
    …mapActions({ removeService: "service/deleteService" }),
  2. Then, the new dispatch action can be rewritten as: this.deleteService(payload)
dispatch("loading/startLoading", null, { root: true })

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store