CODEWITHSUNDEEP
vue.jsvuex
Sang Dang
Sang Dang

Reputation: 489

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.

Upvotes: 16

Views: 25633

Answers (2)

James Ikubi
James Ikubi

Reputation: 2948

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

This is the syntax used:

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

Upvotes: 13

user320487
user320487

Reputation:

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.

Upvotes: 44

Related Questions