Vuex命名空间下mapGetters映射后调用getUser报错：TypeError: this.getUser不是函数

嘿，这问题其实挺常见的，我来帮你捋清楚！

问题根源 #

你混淆了mapGetters和mapMutations的本质：

• mapMutations是把Vuex的mutation映射成组件methods里的方法，所以你能直接用this.change(email)作为函数调用，这完全没问题。
• 但mapGetters是把Vuex的getter映射成组件computed里的计算属性，它是一个属性值，不是函数，自然不能加()调用啦！

修复方案 #

只需要把login方法里的函数调用改成直接访问属性就行：

login() {
  this.change(email); // mutation调用正常，无需改动
  this.loggedin = this.getUser; // 去掉括号，直接访问计算属性
}

额外补充（针对带参数的getter场景） #

要是你以后遇到需要传参的getter（比如根据ID获取用户），可以在Vuex的getter里定义一个返回函数的结构，比如：

// Vuex getter定义
const getters = {
  getUserById: (state: any) => (userId: string) => {
    return state.users.find(user => user.id === userId)
  }
}

这时候在组件里映射后，就可以用this.getUserById('123')来调用了——不过这种情况是因为getter本身返回了一个函数，和你当前的场景不一样哦。

内容的提问来源于stack exchange，提问作者farahm