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

Question

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.

@btl yes, it is namespaced. – Sang Dang Jan 22 '18 at 07:32 — Sang Dang, Jan 22 '18 at 07:32

score 44 · Accepted Answer · 2018-01-22T07:57:23.353

44

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.

edited Jan 22 '18 at 07:57

answered Jan 22 '18 at 07:39

Thank you but I don't ask for combining them into a single getter. I'm asking about how to use the `mapGetters`. In your answer, when I try to do: `...mapGetters([ 'firstRootGetter', 'myModule1/exampleGetter', 'myModule2/anotherGetter', ])` it does not work. – Sang Dang Jan 22 '18 at 07:55
3

See my answer again, I've edited how the getters are passed in. Use an object `{}` instead of an array `[]` and provide aliases for the getters. Doing this you can use `this.exampleGetter` and `this.anotherGetter`. – Jan 22 '18 at 07:58
Glad it helped. Ta. – Jan 22 '18 at 08:04
Oh are you real Linus Borg??? You are my idol! Back to the question, yes, of course, it worked in 2 getters, just wondering if I could make it in one place. Don't know why I like to call it at once. Again I'm really glad that you answer my question. – Sang Dang Jan 22 '18 at 10:26

score 12 · Answer 2 · answered Aug 09 '20 at 11:37

computed: {
        ...mapGetters('module1', ['getQuestions', 'getAnswers']),
        ...mapGetters('module2', ['getGrades'])
    },

This is the syntax used:

 ...mapGetters('some/nested/module', [
    'someGetter', // -> this.someGetter
    'someOtherGetter', // -> this.someOtherGetter
  ])

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

2 Answers2