Splitting The Store Into Modules

The larger an app gets, the larger the state machine will be. Over time, we add features to our app, let it communicate with more endpoints, and perform more complex tasks. We tend to split code into units related to either features or the kind of code, such as controllers or services. We can also split our Vuex store into different modules.

Splitting the store helps us separate concerns. For example, if we have dozens of getters and fields, they might not be related to each other and serve entirely different purposes. Usually, we can anticipate how large a store will get and what kind of modules we will have. It is, therefore, recommended to split the store early on.

How to define submodules

A Vuex store can have submodules that are namespaced. Not every module needs to be namespaced though.If we split the store into modules, we may still use global fields and getters not in a namespace, which essentially works around the incentive to create a global or general module. A module has the same structure as any Vuex store. We need to register the module in the store.