Awwwards
How To Migrate to Vuex's New Module Namespacing's Hero Image

How To Migrate to Vuex's New Module Namespacing

A few months ago, we took a look at how to set up modules in Vuex. Since then, the folks over at Vue have made the process of namespacing our modules so much easier. Let's take a look at how we can migrate our old implementation of namespacing to the new spec.

The Old Way

If you recall the previous post, we had to do a lot of work to get namespacing set up. We created two helper files within our utils directory called namespace.js and types.js. In namespace.js, we created a helper function that we could import into types.js to generate the proper namespacing according to the way it was defined in types.js. Then, with everything defined, we could hop back into our modules and import the namespacing so we could use it to define our getters, actions, and mutations.

While you could certainly get into a rhythm with this, it often proved to be tedious and time-consuming - especially when you wanted to focus on cranking out a feature. Thankfully, the Vue team has once again stepped in to deliver a better developer experience.

The New Way

To namespace according to the new spec, all we have to do to add namespacing is include namespaced: true in a module's store and Vuex will take care of the namespacing for us.

Migrating From The Old Way

Upgrading your modules to use the new namespacing is pretty straight-forward. First, make sure that you're using the latest version of Vuex. Then head over to your utils folder and remove namespace.js and types.js. Next, go to your modules and remove the namespacing imports from the top of your files. They should look something like this:

import { namespace } from '../../utils/types.js';

Now inside all of your module files (store.js, actions.js, etc.), you can refactor the bracket syntax we used before to explicitly namespace to use the regular Vuex syntax. For example:

//Old Way With Bracket Syntax

const getters = {
	[yourModuleName.getters.currentView]: state => {
		return state.currentView;
	}
}

const mutations = {
	[yourModuleName.mutations.UPDATE_CURRENT_VIEW]: (state, value) => {
		state.currentView = value;
	}
}

const actions = {
	[yourModuleName.actions.updateCurrentView]: (context, value) => {
		context.commit('UPDATE_CURRENT_VIEW', value)
	}
}

//New way

const getters = {
	currentView: state => {
		return state.currentView;
	}
}

const mutations = {
	UPDATE_CURRENT_VIEW: (state, value) => {
		state.currentView = value;
	}
}

const actions = {
	updateCurrentView: (context, value) => {
		context.commit('UPDATE_CURRENT_VIEW', value)
	}
}

What a world of difference that makes to your modules' readability! Finally, within your const module add namespaced: true at the beginning of your const so it looks like this:

import store from './store.js';
import getters from './getters.js';
import mutations from './mutations.js';
import actions from './actions.js';

const module = {
    namespaced: true,
    state,
    getters,
    mutations,
    actions
};

export default module;

And there you have it! Your modules are now up-to-date and using the latest Vuex syntax.

The Takeaway

While this migration isn't strictly necessary, I've found that it has saved me a lot of time because I don't need to define my namespacing before I write my module functions. Plus, it has greatly improved the readability of my components. The only downside that I've noticed is that without a types.js file I can don't have a central place where I can see all of my modules and what they do. For me, this is a small price to pay, but it's a price nonetheless.

I hope that this quick migration guide can get you up and running with the new Vuex namespacing in no time. Until next time, happy coding!


Nick Basile's Profile Picture

Nick Basile


Lead UI/UX Engineer

Nick is the Lead UI/UX Engineer at Metric Loop. He lives in Austin, TX and spends his free time taking long strolls on South Lamar. If you see him, be sure to honk.