In VueJS component mapping vuex getters to a different name not working

Question

computed: {
  ...mapGetters('global/train_ticket', [
    { ticketTypeForTrain: 'getTicketType' },
    { ticketFareForTrain: 'getTicketFare' },
  ]),
},
mounted() {
  console.log(this.ticketTypeForTrain + ' ' + this.ticketFareForTrain)
},

In the code above I have explicitly named the getters. And when I am trying to fetch them in mounted hook I get undefined undefined

If I do not name them explicitly, I am able fetch the values like below

computed: {
  ...mapGetters('global/train_ticket', [
    'getTicketType', 'getTicketFare'
  ]),
},
mounted() {
  console.log(this.getTicketType+ ' ' + this.getTicketFare)
}

Why naming getters is not working?

Thanks

Answer 1

As seen in the docs:

If you want to map a getter to a different name, use an object

So your code should use an object instead of an array, like this:

computed: {
  ...mapGetters('global/train_ticket', {
     ticketTypeForTrain: 'getTicketType',
     ticketFareForTrain: 'getTicketFare',
  }),
},
mounted() {
  console.log(this.ticketTypeForTrain + ' ' + this.ticketFareForTrain)
},