Per Component Vuex Module Opinions

I have been going back and forth with individual Vuex Modules for my “widgets” (and I say widgets since they are more than a standard component), or putting all the “widget” states in a global store.
Both ways work as expected but the module method is preferred, keeping each module small vs 1 massive file jammed with getters, actions, mutations.

Think of a dashboard with many “blocks” or “widgets” that are there for 1 specific reason / function. I have 20 widgets on my dashboard for user Credits, Availability, Contacts, Settings, Languages and so on…

Each one is self sufficient / independent so no matter where I place it on the site its will function as intended with ability to show data, add, edit, delete data.
Each module’s state is very minimal and 90% all look identical like so:

export const state = () => ({
  records: [],
  loading: false,
  selectables: [],
  edit: false,
  count: 0
})

I am just wondering from others experience, what is the best appropriate way to set something like this up? Modules or single file? If going with modules I could end up with 30+.

I have tried the dynamic loading of modules to reuse 1 source for the modules with limited success.

store.registerModule(name, commonModule)

So that is not a viable option at this point.

Thanks,

Dave

I’d go with the module route, if you want to automate the modules, I’d do something like this in your store/index.js file

let mods= {}

let files = fs.readdirSync(path.join(__dirname+’/store/modules/’))

files.forEach((file)=>{

mods[file] = require(file))

})

const Store = new Vuex.Store({
modules: {
…mods,
}
})

Originally i had something very similar, but forgot to mention this is a NUXT app, and in the upcoming release of V3, Vuex store in classic mode like you have:

const Store = new Vuex.Store({
modules: {
…mods,
}
})

is deprecated and will no longer be an option.

got a link to what’s changing?

Nothing really, just a note in the Vuex page

Scroll down to Classic Mode and simply states
“This feature is deprecated and will be removed in Nuxt 3.”

oh so they’re already doing the whole loop thing?

then there isn’t a problem is there or?

How will plugins work then for nuxt v3?? A. Oh there’s support for it

Not sure about v3 plugins, but right now any module placed inside the “store” folder automatically gets added to the store.

isn’t that what you want?

Sorry, I was asking for opinions on what way to do it.
I made it both ways with individual modules, and as a single store with no modules. But having so many modules with a very tiny state per module seemed like over-kill but then 1 large file with all the various states / getters / actions jammed into 1 file seemed unmanageable. So it was just a question of best practice, not so much how to use modules.

I reckon modularising is the way to go