DEV Community

Cover image for Smart Way to Structure Vuex

Smart Way to Structure Vuex

halasproject profile image Salah Bentayeb ・1 min read

After using vuex in several projects, i got used archetecture to import the modules, which will facilitate the code process, and not clutter our store file with several states,getters ... I let you discover this:

First we create a directory store and inside it add a new file index.js, but before that don't forget to import it into your main file like this:

Alt Text

Edit your store/index.js

Alt Text

and we notice that we have a new folder modules which will contain all our modules (*.js) and an autoloader.js file

The autoloader.js will import all modules inside directroy and create a new object to eject it in

Alt Text

Ok, now the rest is up to you, you just have to create (.js) files inside the modules folder and of course respect the vuex structure for each module like this :

Alt Text

Our final structure directroy will look like this:
Alt Text

I preferred to Screen the code than to write it so that you understand what you are going to write rather than coppy & past :D


Editor guide