DEV Community

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...

Read full post

Mohamed ELIDRISSI • Jul 12 '21

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

Domagoj Vidovic • Jul 13 '21

Glad to hear that! More content is coming 🙂

James Thomson • Jul 14 '21

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 👏

Mohamed ELIDRISSI • Jul 14 '21

Ahh dark mode, more like "dark more!"

Chris Scott • Jul 13 '21

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.

Domagoj Vidovic • Jul 13 '21

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

Sean G. Wright • Jul 13 '21

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

neokms • Jul 13 '21 • Edited

Easy

computed: {
            ...mapGetters('sites', {
                site: 'getSiteData',
            }),
            ...mapGetters('publications', {
                dataset: 'getPublicationList',
            }),
        }

Sean G. Wright • Jul 13 '21

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}`;
}

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: [ ... ] });
    }   
  }
}

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

Lakshya Singh • Jul 13 '21

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

Maurice Williams • Jul 14 '21

This is exactly what Nuxt is doing under the hood.

Domagoj Vidovic • Jul 13 '21

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

SnuppeDeluxe • Jul 14 '21

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 :-(