vue.js - Vue 2 - vuex mapGetters 和传递参数

Question

是否可以使用 ma​​pGetters 传递参数？

我在主 Vue 实例中有这个:

computed: {
    filterAuthors() {
        return this.$store.getters.filterAuthors(this.search.toLowerCase());
    }
}

this.search 通过 v-model="search= 绑定(bind)到输入字段，在我的 Vuex 实例中我有这个 getters:

getters: {
    filterAuthors: (state) => (search) => {
        return state.authors.filter((author) => {
            return author.name.toLowerCase().indexOf(search) >= 0;
        })
    }
},

这个工作正常，但我正在尝试找到一种方法(如果可能的话)来使用 mapGetters 并传递参数。这能做到吗？

Answer 1

这确实可以做到! mapGetters 只是将 this.yourGetterName 映射到 this.$store.getters.yourGetterName(参见 docs)

所以为了完成你想要的:

import { mapGetters } from 'vuex'

export default {
  // ... the rest of your Vue instance/component
  computed: {
    // Mix your getter(s) into computed with the object spread operator
    ...mapGetters([
      'filteredAuthors'
      // ...
    ]),
    // Create another computed property to call your mapped getter while passing the argument
    filteredAuthorsBySearch () {
      return this.filteredAuthors(this.search.toLowerCase())
    }
  }
}