如何使用Vuex Getters返回过滤数组？带参Getter调用异常返回函数

你写的这个带参Vuex Getter本身是符合官方规范的，输出函数的问题本质是调用链路断层，没有执行到最终的数组过滤步骤。
先拆解你写的getter的执行逻辑：
这是一个两层嵌套的柯里化函数，正常执行流程是：

• 第一层函数接收Vuex的state作为入参，Vuex在初始化响应式系统时会自动执行这一层，把执行结果（也就是第二层函数）挂载到store.getters.getCities上
• 第二层函数接收你自定义的region参数，执行实际的数组过滤逻辑，返回最终的过滤结果数组

需要明确的是：Vuex带参getter在组件中访问时，拿到的本来就是那个接收region参数的第二层函数，这不是bug，是官方的设计逻辑。只要给这个函数传入正确的region值，就能拿到过滤后的数组。

从你贴的调用代码反推，无非是几种常见的错误操作：

• 没有按照Vuex的规则把getter映射到组件的计算属性上，直接把getter的原始定义（两层嵌套的最外层函数）赋值给了this.getCities。这时候你执行this.getCities(a)，本质是调用了最外层函数，把传入的a当成了state参数，最终返回的就是没被执行的第二层函数，自然会在控制台打印出函数本身
• 虽然用了mapGetters工具函数，但错误地把getCities放到了methods配置块里，没有放进computed中，导致Vuex没有对getter做响应式求值，你拿到的还是未执行的原始函数定义
• 错误地从state中读取getter，而非从store的getters属性中读取。如果你写的是this.getCities = this.$store.state.getCities，拿到的就是未经过Vuex求值的两层原始函数，调用时传入a参数只会返回内层函数，和你现在看到的输出完全一致

1. 不需要修改你现有的Getters定义，当前的两层柯里化写法完全符合官方规范：

// Vuex Store 配置
getters: {
  getCities: state => region => {
    return state.cities.filter(city => city.region === region);
  }
}

2. 在组件中把getter正确映射到计算属性块中：

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    // 必须放在computed内，不能放到methods里
    ...mapGetters(['getCities'])
  },
  methods: {
    test(a) {
      // 此时this.getCities就是经过第一层求值的、接收region参数的函数
      // 传入a参数即可得到最终的过滤数组
      console.log(this.getCities(a))
    }
  }
}
</script>

小提示：带参getter本身不具备响应式缓存能力，每次调用传参都会触发重新计算，如果同一个region值会被多次调用，可以把结果缓存到组件的计算属性中，减少重复计算开销。

内容的提问来源于stack exchange，提问作者Bro From Space