Vuex architecture module by vuex function (state,action,mutation ...), by functional data or by API call

What is the best way to struture module in Vuex ? I would like to have some advice.

By vuex function (state,action,mutation …) ?
By functional data ?
By API call ?

I’m not sure there is a definitive way to do this, it tends to be a matter of personal preference.

Typically modules are split by domain or entity (terminology varies). So maybe a module for products, one for customers, one for orders, etc. It isn’t always possible to get it that clean as different entities can depend on each other. I’m not exactly sure what you mean by ‘functional data’, perhaps that’s the same thing. API calls are also often structured by domain, so it’s not uncommon for all the API calls in a particular module to share a prefix.

You can then choose to split a module up further by separating the state, actions, etc. into their own separate files. Personally I don’t understand why anyone does this because it seems like a very arbitrary way to reduce file size without any real benefit in maintainability.

1 Like

Thanks @skirtle for your vision.

As there is no best way to do so, I decided to separate by state, action, mutation and getter. :sweat_smile: