CODEWITHSUNDEEP
vue.jsvuex
Louwki
Louwki

Reputation: 715

Vue Namespace Module with Params

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)
  }
}

Upvotes: 0

Views: 933

Answers (2)

Roland
Roland

Reputation: 27779

Your getter should have the below format:

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

For the namespaced module you can access getters as

...mapGetters('myNamespacedModule', ['myGetterName'])

Upvotes: 0

Adam Orłowski
Adam Orłowski

Reputation: 4484

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)

Upvotes: 1

Related Questions