带参数的 mapGetters

在Vue应用中，mapGetters可以用于将store中的state映射到组件的计算属性中。而带参数的mapGetters则可以允许我们根据需要获取store中不同模块的getter，并根据传入的参数返回不同的数据结果。

语法

mapGetters可以接受一个对象作为参数，对象的每个属性都是一个通过getter从store中获取数据的方法，而属性值则是一个字符串，表示需要获取的getter名称。

当我们需要传递参数时，我们可以将mapGetters对象中的属性值改为一个函数，函数的参数就是我们需要传递的参数。函数返回的值即为getter所返回的值。

// 在组件中使用带参数的 mapGetters

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      // 常规对象映射
      user: 'userModule/getUser',
      // 带参数
      getTodoById: 'todoModule/getTodoById',
    }),
  },
  methods: {
    // 传入id参数，获取对应的todo对象
    fetchTodoById(id) {
      return this.getTodoById(id)
    },
  },
}

示例

假设我们在store中有两个模块，分别为userModule和todoModule，并且todo模块的state数据结构为：

{
  todoList: [
    { id: 1, title: 'Finish homework', completed: false },
    { id: 2, title: 'Go to gym', completed: true },
    { id: 3, title: 'Read a book', completed: false },
  ]
}

我们需要根据传入的id参数，从todo模块中获取对应的todo对象。这时，我们可以使用带参数的mapGetters来解决问题。

// 在store中

const todoModule = {
  state: {
    todoList: [
      { id: 1, title: 'Finish homework', completed: false },
      { id: 2, title: 'Go to gym', completed: true },
      { id: 3, title: 'Read a book', completed: false },
    ]
  },
  getters: {
    // 根据id获取对应的todo对象
    getTodoById: state => id => {
      return state.todoList.find(todo => todo.id === id)
    },
  },
}

// 在组件中

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      // 通过getter获取user信息
      user: 'userModule/getUser',
      // 带参数，根据id获取todo信息
      getTodoById: 'todoModule/getTodoById'
    })
  },
  methods: {
    handleClick(id) {
      // 传入id参数，获取对应的todo对象
      const todo = this.getTodoById(id)
      // ...
    }
  }
}

上述示例中，我们定义了一个getTodoById的getter方法，并且接受一个参数id，可以根据传入的id值从store中获取对应的todo对象。在组件中，我们通过mapGetters来将getTodoById方法映射到组件的计算属性中，在需要获取todo对象的地方，我们直接调用计算属性即可。