Vue组件中computed无法访问data内filter对象问题求助

嘿，我来帮你捋清楚这个问题哈～你遇到的filter显示undefined的情况，主要是两个this指向的坑导致的，咱们一步步说：

为什么filter是undefined？ #

1. data用了箭头函数，导致this指向错误
   Vue组件要求data必须是一个返回对象的普通函数，因为箭头函数没有自己的this，它会继承外层上下文的this，而不是指向Vue组件实例。你现在用箭头函数定义data，相当于filter根本没挂载到组件实例上，后续自然拿不到它。

2. mapState里的箭头函数同样有this问题
   就算你把data改对了，mapState里用箭头函数的话，它的this也不会指向组件实例，依然访问不到filter。

修正后的代码 #

把这两个地方的箭头函数换成普通函数就搞定了：

export default { 
  components: {..},
  // data改成返回对象的普通函数
  data() {
    return { 
      filter: { from: 2017, to: 2018 } 
    }
  },
  computed: mapState({ 
    // mapState里用普通函数，this会指向组件实例
    fooObjects(state) { 
      console.log(this.filter) // 现在能正常打印{ from: 2017, to: 2018 }了
      // 这里可以继续处理state中的数据，比如返回state.xxx
      return state.targetData
    } 
  }), 
  ... 
}

额外小技巧 #

如果你实在偏爱箭头函数的写法，也可以通过组件实例的$data属性来访问filter（前提是data已经改成普通函数）：

computed: mapState({ 
  fooObjects: (state) => { 
    console.log(this.$data.filter) // 同样能拿到filter
    return state.targetData
  } 
})

不过还是更推荐用普通函数，代码可读性更强，也符合Vue的官方规范。

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