Search code examples
vue.jsvuex

How to use mapGetters with modules and root's getters at the same time?

I know how to use mapGetters in a single situation, but not both.

Example, I have firstRootGetter inside store/index.js, so I will call ...mapGetters(['firstRootGetter']) in vue component.

If I have firstModuleGetter and secondModuleGetterinside store/modules/post.js, I will call ...mapGetters('post', ['firstModuleGetter', 'secondModuleGetter'])

My question is, how do I call them in single ...mapGetters. Is it possible?

Right now I have to write 2 lines to call them separately.

Solution

  • Yes it is possible, you must supply the namespace to the mapGetters helper in each line, though:

    ...mapGetters({
  exampleGetter: 'myModule1/exampleGetter',
  anotherGetter: 'myModule2/anotherGetter',
})

    If you're trying to combine them into a single getter, use a root action that reads both module stores and returns a combined object. Then mapActions like you would mapGetters.