DEV Community

Cover image for How To Structure a Massive Vuex Store for a Production App

How To Structure a Massive Vuex Store for a Production App

Domagoj Vidovic on July 12, 2021

When looking at Vuex tutorials, you can see most of them are quite simple. The logic is explained well, but scalability suffers. How will this wor...
Collapse
 
elidrissidev profile image
Mohamed ELIDRISSI

I like this, we need more posts like this in DEV. Thank you for sharing!

Collapse
 
domagojvidovic profile image
Domagoj Vidovic

Glad to hear that! More content is coming 🙂

Collapse
 
jamesthomson profile image
James Thomson

Are you sure we don't need more Dark Mode posts instead?? 😂

But in all seriousness, this is exactly what DEV needs. Solid post @domagojvidovic 👏

Collapse
 
elidrissidev profile image
Mohamed ELIDRISSI

Ahh dark mode, more like "dark more!"

Collapse
 
cyberstrike profile image
Chris Scott

Built a large application with 4 modules, after 2 years of working on it I an say in full confidence that if you need modules you might as well just build a seperate application.

In no way did it create any advantages to have it all as one application. Even for shared components ad we eventually moved to a shared design system.

Collapse
 
domagojvidovic profile image
Domagoj Vidovic

But building a new application sometimes isn't an option...

Collapse
 
seangwright profile image
Sean G. Wright

How does mapActions know about the namespacing? Wouldn't identically named actions/mutations still cause problems when called from a component?

Collapse
 
neokms profile image
neokms • Edited

Easy

computed: {
            ...mapGetters('sites', {
                site: 'getSiteData',
            }),
            ...mapGetters('publications', {
                dataset: 'getPublicationList',
            }),
        }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
seangwright profile image
Sean G. Wright

Awesome - I use createNamespacedHelpers but I guess I never realized that worked the same way as using mapActions directly with a namespace as the first parameter!

I like having strong types for my actions/mutations without having to import something, so I create an action function that uses JS Doc type unions

export const actionTypes = {
  UPDATE_DATA: 'UPDATE_DATA',
  LOAD_DATA: 'LOAD_DATA'
};

/**
 * @param {keyof actionTypes} actionType
 */
export function action(actionType) {
  return `dataModule/${actionType}`;
}
Enter fullscreen mode Exit fullscreen mode

In my SFCs I can use it like this:

import { action as dataAction } from './store'

export default {
  methods: {
    onSubmit() {
      this.$store.dispatch(dataAction('UPDATE_DATA'), { someData: [ ... ] });
    }   
  }
}
Enter fullscreen mode Exit fullscreen mode

The value I can pass to dataAction is strongly typed to be only one of the keys of actionTypes.

Collapse
 
king11 profile image
Lakshya Singh

Never used Vuex Modules before but NuxtJS provides a way through subdirectories I believe, I wonder if it uses this under the hood

Collapse
 
morficus profile image
Maurice Williams

This is exactly what Nuxt is doing under the hood.

Collapse
 
domagojvidovic profile image
Domagoj Vidovic

Hmm, I'm not sure that it's connected

Collapse
 
snuppedeluxe profile image
SnuppeDeluxe

I tried to make it in a small tutorial project on my own.
I got an error: "[nuxt] store/index.js should export a method that returns a Vuex instance. "
Maybe I'm a bit to stupid for it, but in /store/index.js is a function called "export default new Vuex.Store({...})
That's the exported method to return a Vuex instance...

That's so difficult for now :-(

Collapse
 
davey profile image
Davey

This is fantastic. Thanks :)

I didn't know about this and have been putting everything in one file. I'll definitely be using this technique in the future.

Collapse
 
domagojvidovic profile image
Domagoj Vidovic

Glad you like it! Start as soon as possible :) let's tackle that tech debt!

Collapse
 
devanks profile image
Devan Sambasivan

Love this. It would have helped me greatly when we were setting up our apps.

Collapse
 
domagojvidovic profile image
Domagoj Vidovic

Thanks a lot mate! We need more tutorials/guides about scaling a huge system, not just the basics!

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

The first Vue Apps I built at work I didn't know about modules and the stores definitely got a bit out of hand 😅

Collapse
 
domagojvidovic profile image
Domagoj Vidovic

I can imagine that chaos 😆

Collapse
 
snuppedeluxe profile image
SnuppeDeluxe

I'm still learning js and vue. I love posts like this to learn best practice from the beginning.

Collapse
 
domagojvidovic profile image
Domagoj Vidovic

Yep, it's good to create as low tech debt as possible!