If you’ve had any experience using vuex for state management, you should be very familiar with the following vuex store setup:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Vuex from 'vuex';
Vue.use(Vuex);

import auth from './modules/auth';
import cars from './modules/cars'
import dealerships from './modules/dealerships';

export const store = new Vuex.Store({
  modules:{
    auth,
    cars,
    dealerships,
  }
})

This is just a simple store with a few vuex modules. This approach is completely adequate if you have a simple project with a few modules. However, what happens when your project starts to get a little bigger?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import Vuex from 'vuex';
Vue.use(Vuex);

import auth from './modules/auth'
import cars from './modules/cars'
import dealerships from './modules/dealerships'
import makers from './modules/makers'
import salespeople from './modules/salespeople'
import representatives from './modules/representatives'
import safety from './modules/safety'

export const store = new Vuex.Store({
  modules:{
    auth,
    cars,
    dealerships,
    makers,
    salespeople,
    representatives,
    safety
  }
})

Look at all those imports — and this is only 7 modules. As your project becomes bigger and you add more modules, your store file can quickly become a bit of a mess. Not to mention it’s quite monotonous and boring to type these same few lines every time you want to add a new module.

If only there was a better way…

There is!

A little while ago I saw a dev talk in which Chris Fritz introduced an awesome pattern for importing all vuex modules from within a directory automatically.

This pattern is really cool and I couldn’t help but share it. Let’s take a look.

To start, here is our general file structure.

All of the work is done inside modules/index.js.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import camelCase from 'lodash/camelCase'
const files = require.context('.', false, /\.js$/)
const modules = {}

files.keys().forEach(fileName => {
  if (fileName ==='./index.js')
    return
  const moduleName=camelCase(
    fileName.replace(/(\.\/|\.js)/g,'')
  )
  modules[moduleName] = files(fileName).default

});
export default modules

This example will grab a reference to all of the javascript files in the current directory, import them, and map them to a camel case property in the defined “modules” object. That modules objects becomes our default export.

Isn’t that a nice little piece code?

Extra:
If any of this code is confusing or you just want to take a closer look, please check out my code review post.

OK, we now have a way to easily export all of our vuex modules.

Now let’s take a look at the top level index.js file and see what happens with our store.

We simply do:

1
2
3
4
5
import modules from './modules';

export const store = new Vuex.Store({
  modules:modules
})

That’s it! Look at how nice and lean our store code has become. Not to mention we’ve saved ourselves quite a bit of monotonous work.

And… our productivity has gone up! Yeah!

It’s clever code like this that really gets me excited about programming.

What are you waiting for? Go ahead and start implementing this in all of your vue projects.

Extra Information:
Chris Fritz’s github.