This is a review of the code snippet provided in the post Vuex Productivity Hack: How to Import All Vuex Modules Automatically.

If you have not seen that article, I strongly recommend giving it a read as you might not understand the code here.

OK, let’s start.

Here is the code from last time:

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

Let’s go through this line by line.

1
import camelCase from 'lodash/camelCase'

This line imports the camelCase function from the popular functional programming package lodash. If you haven’t use lodash before, I highly recommend checking it out.

This function, as the name implies, will take a string and convert it to camel case for you. Whether you pass it a string in kebab-case, underscore_case, or just a space delimited string, it will return a camel case version of the string.

1
const files = require.context('.', false, /\.js$/)

The require.context function takes three parameters:

  • the directory
  • a boolean that indicate whether you want to check subdirectories
  • a regular expression

In this case:

The first parameter “.” indicates that we want to match within the current directory.

The second parameter, false, means we don’t want to require any files from sub-directories.

The final parameter, the regular expression /\.js$/, indicates that we only want to match files ending in ‘.js’.

1
2
3
files.keys().forEach(fileName => {
  if (fileName ==='./index.js')
    return

The context object returned by require.context has a property called keys which will give you an array of all the files.

The forEach method on this array allows you iterate through the files.

1
2
if (fileName ==='./index.js')
  return

This line will ignore “index.js”(the current file), as it is not a vuex module.

1
2
3
const moduleName=camelCase(
  fileName.replace(/(\.\/|\.js)/g,'')
)

This line uses a regular expression to get rid of any slashes or ‘js’ file extensions.
The cleaned string is used to generate a new string with the camel case function.
This is very useful if you use kebab case or underscore case to name your files.

1
modules[moduleName] = files(fileName).default

The right hand side of this expression is the default export of the reference to the required module.

The left side is a mapping of this module to a camel case property in our modules object.
});

1
export default modules

The final line will export our modules object.

And that’s it — we have all our modules included inside of one object.

You can keep creating new vuex modules and know that they will be included in this object.

Then, just import this object and include it in your store.

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

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

Now that you have a better understanding of this code, it’s time to go try this out in your vue projects.

Enjoy!