When writing large front-end applications, managing state can be quite a complex and tedious task.


For Vue.js, a Vuex plugin was developed for managing state. By default, the following folder structure is built in it:

Vuex repository folder structure

This folder structure could be used in small applications, but in large ones the source code will most likely look unreadable and ugly, and over time it will become difficult to work with it.

Oh yes, I learned this through my own hard experience

I would recommend a folder structure in which the repository is divided into various modules. For example:

Recommended Vuex structure (approx. translation: in this picture, the author probably forgot to add the file store/modules/user/mutations.js, because it appears later in the code)

This folder structure divides the storage into modules, each of which has its own separate folder. The folder with all modules is located in the same place as index.js generated using Vuex. As you would expect, the contents of the index.js file must also be changed, for example, this:

import Vue from "vue"; import Vuex from "vuex"; import state from './state.js' import actions from './actions.js' import mutations from './mutations.js' import getters from './getters.js' import user from './modules/user/index.js' Vue.use(Vuex); export default new Vuex.Store({ state, mutations, actions, getters, modules: { user } }); 

In this example, I created the “user” module, imported it into index.js, provided by the Vuex library. Thus, the user module was connected to the repository and is now available.

Moving to the “user” module, we import state, actions, getters and mutations into modules/user/index.js this way:

import state from './state.js' import mutations from './mutations.js' import actions from './actions.js' import getters from './getters.js' export default { namespaced: true, state, mutations, getters, actions, } 

If you notice, the namespaced field has been set to true. This is because in certain circumstances we want to be able to indicate that a particular module is looking for a specific action, state, or getter. Let's move on.


Due to the transition from the standard Vuex structure to the modular, through which we accessed the Vuex state, we need to change. For example, we will not be able to access the userAvatar field from the state of the “user” module by simply mapping the userAvatar field to the fields of the object of the calculated properties (approx. Transl.: simple mapping means such a standard way to call the mapState function: CDMY0CDMY). So we use the mapState function (approx. Transl.: this function automatically generates calculated properties) in the component script as follows:

import {mapState} from 'vuex' export default { computed: { ...mapState({ userAvatar: state => state.user.userAvatar }) }, } 

The recommended method for gaining access to the module state, which would look like this, is shown above:

export default { userAvatar: "img-location" }; 


It is also impossible to expect that the action from the “user” module will be accessible by a simple mapping of actions to the fields of the methods object. We would have to specify a specific module that we are trying to access, for example:

import {mapActions} from 'vuex' export default { methods: { ...mapActions("user", ["getUserInfo"]), userInfo() { this.getUserInfo()//вы могли бы либо отобразить это – как мы сделали выше (прим. пер.: вероятно, имеется в виду строчка <..mapActions("user", ["getUserInfo"]),>), либо вызвать в точности тем же способом,//что использован ниже this.$store.dispatch('user/getUserInfo')//эти два метода выполняют одну и ту же задачу – вызов действия getUserInfo } }, } 

The above is the preferred method of accessing an action from modular Vuex if you use the following file with actions:

export default { getUserInfo() { alert('Successful') } } 


Mutations are used for synchronous functions and are most often used to change state. The way to gain access to the mutation will also be different.

export default { methods: { setuserInfo() { let data={ name: 'Henry' } this.$store.commit('user/setUserInfo', data) } }, } 

The above is the recommended way to access mutations in modular Vuex when using such a file with mutations:

export default { setUserInfo: (state, data) => { state.user=data } } 


Getters are similar to the computed property of a component. They are used for calculations or filtering.A typical use case for getters is sorting by differences in fields or by field availability, for example:

export default { getActiveUsers: state => { return state.users.filter(x => === true) } } 

Above is the recommended way to declare or write a getter, and you can access it by mapping getters to the fields of the object of the calculated properties, for example like this:

import {mapState} from 'vuex' export default { computed: { ...mapGetters('user', ['getActiveUsers']) }, } 

It has been a long way, I hope you have managed to use modular Vuex and write cleaner code.