Vuex - the enterprise setup

Vuex is the official state management library for Vue.js, with a really great documentation. In my opinion, it is much nicer to use than Redux as it requires less boilerplate code and supports async actions without any additional libraries. Moreover, since it is being developed by the core Vue.js team, it integrates with Vue extremely well. Unfortunately, sometimes it still might be a bottleneck for some to get the setup right. Vue.js core team member Chris Fritz has created a great boilerplate for Vue which you can find at https://github.com/chrisvfritz/vue-enterprise-boilerplate. It has a great Vuex setup which automatically registers modules for you based on the files you created in the 'modules' folder. The folder structure looks roughly like that:

However, you have to have state, getters, actions, and mutations all in one file. I myself prefer to have them in separate files as there is no need to scroll through all the code to find a specific thing, especially since Vuex modules can sometimes get quite big. Therefore, we will alter the code from the boilerplate so that we can have our modules in respective folders instead.

Enough of the explanation, lets get started with the business. Create a new project using vue-cli 3. You can find all the instructions at https://cli.vuejs.org/. When you have the boilerplate setup, install Vuex and Lodash by running 'npm install vuex lodash - save' in your terminal. We will need a 'camelCase' function from lodash for our modules. Now create the folder and file structure just like in the image above.

Let's start from the store.js file.

You can see that we are importing at the top Vue and Vuex, as of course they are required. We also import modules from '/modules/index.js'. Later we initialised the store as well as loop through all the modules. If the module has an action called 'init' then it will be initialised. This is really useful when a certain module should be initialised at the start of the app. Later of course we export the store which is then usually imported in 'main.js' file and added to the Vue instance.

Now is the time to modify index.js file which is in '/store/modules' directory.

We need to import 'camelCase' function from lodash. Then we use 'require.context' to require our modules. As the third parameter we are passing a regex which will filter out the index.js file as well as files which has 'actions', 'mutations', and 'getters' in their name. These will be imported in the 'state' file, for instance 'auth.js' and then exported. For instance, that's how the 'auth.js' file in 'src/store/modules/auth/auth.js' could look like at the start.

Now the only thing left to do is to loop through all of our modules and build one object with all of them. We have to exclude any files that have 'unit' in their name as these are only for the tests and not for the development or production. After that, we add a new property to the 'modules' object which will have the name of the 'state' file, e.g. 'auth' or 'users'. We also use the 'camelCase' function to make sure that the property names will be consistent. As the result of 'requireModule' is an array of filenames, we access the appropriate state file and spread the object which it exported.

That's how you can setup your project to be able to keep your state, getters, actions and mutations separately and well organised. You can find a repo with code here. In part 2 of this article you will see how to create a script to generate Vuex modules automatically with one line command in the terminal. You can find it here.

Other readings:

Building a list keyboard control component with Vue.js and scoped slots

Intro to the React Context API

Modern JavaScript features which you should be using every day for better development and what problems do they solve.

How to create a staggered animation for paginated list in Vue.js