Vue Namespace Module with Params

Question

I have my store setup as

# State
export default {
 servers: []
}

and my getter as follows

# Getter
export function serverById (state, id) {
 return state.servers.find(server => server.id === id)
}

Im calling my getter from my vue component

computed: {
  ...mapGetters({
  //   server: 'servers/serverById'
  }),
  getServers () {
    return this.$store.getters['servers/serverById'][22]
  }
}

I keep getting

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property '22' of undefined"

when I change to round brackets I get

computed: {
  ...mapGetters({
  //   server: 'servers/serverById'
  }),
  getServers () {
    return this.$store.getters['servers/serverById'](22)
  }
}

[Vue warn]: Error in mounted hook: "TypeError: this.$store.getters.servers/serverById is not a function"

I have event tried using the mapGetter option with a method, but still no luck.

methods: {
  getServerDetails (id) {
    return this.server(id)
  }
}

vuex.vuejs.org/guide/getters.html look for section Method-Style Access. In a getter you need to return method that takes id argument. — Adam Orlov

Adam Orlov Adam Orlov · Accepted Answer · 2019-07-26T12:24:45

vuex.vuejs.org/guide/getters.html look for section Method-Style Access. In a getter you need to return method that takes id argument.

export function serverById (state) {
 return id => state.servers.find(server => server.id === id)
}

and call it with this.$store.getters['servers/serverById'](22)

Vue Namespace Module with Params

2 Answers