Vue2中如何在mapState函数内引用Vue实例？

首先明确你原来写法的两个问题：

• mapState的回调函数没有第二个vm参数，所以你写的vm是undefined；
• 使用箭头函数会捕获定义时的外部this，而非Vue组件实例，导致此处this为undefined。

解决方法很直接，把箭头函数改成普通函数，此时函数内的this会自动绑定到当前Vue组件实例，就能访问实例上的属性了：

computed: {
  ...mapState('myModule', {
    myVal: function(state) {
      // 这里的this就是当前组件实例，可直接访问this.someVar
      return state.someVar.filter(_ => _ === this.someVar)
    }
  })
}

如果你的过滤逻辑特别复杂，也可以放弃mapState的对象写法，直接写独立的计算属性，逻辑实现会更灵活直观：

computed: {
  myVal() {
    const moduleState = this.$store.state.myModule
    // 直接用this访问组件实例属性，支持任意复杂的过滤逻辑
    return moduleState.someVar.filter(item => {
      return item.id === this.currentId && item.status === this.activeStatus
    })
  }
}

核心要点：不要在mapState的回调里用箭头函数，普通函数的this会被Vue正确绑定到组件实例。

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