[Vuejs]-Can i dynamically call a getter using mapGetters in Vue/Vuex?

3๐Ÿ‘

โœ…

I would suggest using a getter with a parameter for the stage id/number that returns the roadmap you want, like so:

// in getters.js
//gets the current roadmap based on the stage number
getRoadmapByStage: (state) => (stageNumber) => {
    return state["roadmapStage" + stageNumber];
}

now in your component you can have:

computed: {
   currentRoadmap() {
      // now we'll pass in your 'stage' prop to get the appropriate map
      // this will re-render the component as that prop changes
      return this.$store.getters.getRoadmapByStage(this.stage);
   }
}
๐Ÿ‘คmaembe

1๐Ÿ‘

You can declare your computed roadmap property as follows:

computed: {
  roadmap() {
    return this.stage ? this.$store.getters['getRoadmapByStage' + this.stage] : undefined
  },
}

That way you are getting the roadmap by the value of the prop or undefined if the prop is not set to anything.

๐Ÿ‘คsebasaenz

Leave a comment