Vue.js Vuex 模块问题: 在_mapGetters()中 getters 应该是函数

在本文中，我们将介绍Vue.js中使用Vuex时遇到的一个常见问题：在_mapGetters()中，getters应该是一个函数。

问题描述

在Vue.js中使用Vuex时，可以通过_getters()方法来获取store中的getter。对于简单的getter，我们可以直接在computed属性中使用_mapGetters()辅助函数进行映射。然而，当我们的getter需要接受参数时，我们需要将getter定义为一个函数。否则，我们会遇到一个常见的问题，即无法正确映射getter。

问题示例

让我们假设有一个Vuex模块，名为userModule，其中包含一个getter，用于根据用户ID获取用户信息。这个getter需要接受一个参数，即用户ID。

// userModule.js

const state = {
  users: [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
    { id: 3, name: 'Bob' }
  ]
}

const getters = {
  getUserById: (state) => (id) => {
    return state.users.find(user => user.id === id)
  }
}

export default {
  state,
  getters
}

现在，让我们在Vue组件中使用这个getter：

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters('userModule', {
      user: 'getUserById'
    })
  }
}

当我们在Vue组件中运行时，我们会发现这样的错误信息：[vuex] getters should be function but "getUserById" in module "userModule" is {}。

解决方法

为了解决这个问题，我们需要将getter定义为一个函数。在getter定义中，我们可以通过返回一个新的函数来接受参数。

修改userModule.js中的getters：

const getters = {
  getUserById: (state) => (id) => {
    return state.users.find(user => user.id === id)
  }
}

通过在getter定义中返回一个新的函数，我们可以将参数传递给这个函数，并正确获得我们需要的getter结果。

解决方法示例

现在，让我们再次使用修复后的getter。

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters('userModule', {
      user: 'getUserById'
    })
  },
  created() {
    console.log(this.user(2)) // 输出: { id: 2, name: 'Jane' }
  }
}

运行这个Vue组件，我们将正确地打印出用户ID为2的用户信息：{ id: 2, name: 'Jane' }。