Search code examples
javascriptvue.jsvuejs2vuexvuex-modules

Map a namespaced getter (maintaining reactivity) in Vuex?

I know you can use a standard getter from your Vuex store by importing mapGetters...

import {mapGetters} from 'vuex';

Then adding a computed property as follows:

computed: {
    ...mapGetters({
        myGetter: 'my-getter'
    })
}

I have split my Vuex store into modules in order to use namespaced actions/mutations.

I want to use 'mapGetters' in order to access a getter from a specific module.

TL;DR - What would be the necessary changes in syntax for mapping a modular namespaced getter in Vuex from the above snippet?

Solution

  • This is the syntax to be used:

    computed: {
    ...mapGetters('moduleOne', ['getUsers']),
    ...mapGetters('moduleTwo', ['getProducts'])
},