带有参数的 Vue 命名空间模块答案

【问题标题】：Vue Namespace Module with Params带有参数的 Vue 命名空间模块
【发布时间】：2019-12-04 16:55:33
【问题描述】：

我的商店设置为

# State
export default {
 servers: []
}

和我的getter如下

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

我从我的 vue 组件调用我的 getter

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

我不断得到

vue.runtime.esm.js?2b0e:619 [Vue 警告]：挂载钩子错误： "TypeError: 无法读取未定义的属性 '22'"

当我改为圆括号时，我得到

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

[Vue 警告]：挂载钩子错误：“TypeError： this.$store.getters.servers/serverById 不是函数”

我曾尝试将mapGetter 选项与方法一起使用，但仍然没有成功。

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

【问题讨论】：

导出函数 serverById (state) { return (id) => ....
vuex.vuejs.org/guide/getters.html 查找“方法样式访问”部分。在 getter 中，您需要返回采用 id 参数的方法。

标签： vue.js vuex

【解决方案1】：

vuex.vuejs.org/guide/getters.html 查找“方法样式访问”部分。在 getter 中，您需要返回带有 id 参数的方法。

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

并用 this.$store.getters['servers/serverById'](22)

【讨论】：

【解决方案2】：

您的 getter 应具有以下格式：

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

对于命名空间模块，您可以访问 getter

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

【讨论】：