I have a props that i want to use to make a dynamic mapGetters but the the mapGetters sees the props as undefined, probably because the computed is loaded before the props. Do anybody know how i can make it dynamic? my code is as follow:

export default {
    props: ['listType'],
    components: {
        addrow: AddRow
    },
    computed: {
        ...mapGetters({
            list: `${this.listType}/list`,
            current: 'Dropdown/current'
        }) 
    },
}

I have a props that i want to use to make a dynamic mapGetters but the the mapGetters sees the props as undefined, probably because the computed is loaded before the props. Do anybody know how i can make it dynamic? my code is as follow:

export default {
    props: ['listType'],
    components: {
        addrow: AddRow
    },
    computed: {
        ...mapGetters({
            list: `${this.listType}/list`,
            current: 'Dropdown/current'
        }) 
    },
}

• javascript
• vue.js
• vuejs2
• vuex

• try it without this keyword like list: `${listType}/list – Boussadjra Brahim Commented Sep 30, 2018 at 12:34
• I tried that but then im getting an error: listType is not defined – jason_decode Commented Sep 30, 2018 at 12:36
• did you try list:this.listType+'/list' – Boussadjra Brahim Commented Sep 30, 2018 at 12:38
• could you show how to call the component in the parent one? – Boussadjra Brahim Commented Sep 30, 2018 at 12:42
• Thanks for u reply, When i try list:this.listType+'/list' then its still undefined, When i console.log the listType on mounted it works fine, its undefined because the computed is loaded before props and everything, Im just curious if there is a vue function or something to archive this. – jason_decode Commented Sep 30, 2018 at 12:51

3 Answers 3

[UPDATE] I have found the solution thanks to @boussadjrabrahim My working code look like this:

export default {
    props: ['listType'],
    components: {
        addrow: AddRow
    },
    computed: {
        ...mapGetters({
            current: 'Dropdown/current'
        }), 

        ...mapState({
            list (state, getters) {
                return getters[`${this.listType}/list`]
            }
        })
    }
}

You can also use this.$store for complete access to the store. So, list would become

export default {
    props: ['listType'],
    computed: {
        list() {
            return this.$store.getters[`${this.listType}/list`]
        }
    }
}

Use the dispatch method to trigger an action, like so

export default {
    props: ['listType'],
    methods: {
        sortList(order) {
            this.$store.dispatch(`${this.listType}/list`, order)
        }
    }
}

What I found that worked was essentially rolling your own mapGetters method in the created() stage of the lifecycle.

Note that this solution has NOT been fully vetted and I have no idea what, if any "gotchas" it may create. As always, caveat emptor.

export default {
  props: ['listType'],
  components: {
    addrow: AddRow
  },
  created() {
    // This can be configured a number of ways, but for brevity:
    const mappableGetters = {
      list: `${this.listType}/list`,
      current: 'Dropdown/current'
    }

    Object.entries(mappableGetters).forEach(([key, value]) => {
      // Dynamically defines a new getter on `this`
      Object.defineProperty(this, key, { get: () => { return this.$store.getters[value] } })
    })

    // Now you can use: `this.list` throughout the component
  },
  computed: {
    // Roll your own mapper above in `created()`
    // ...mapGetters({
    //   list: `${this.listType}/list`,
    //   current: 'Dropdown/current'
    // })
  }
}