Question

最近使用VueJS-Vuex，我发现这个关键字令人困惑。这里是我的组件之一中的代码：

  props: {
    name: { type: String, default: '' }
  },
  computed: {
    ...mapState('storeJobNew', {
      factors: (state) => state.job['majors']
    })
  },

它工作正常，直到我想使其动态化，因此 computed.factors 现在基于 props.name 值。

  props: {
    name: { type: String, default: '' }
  },
  computed: {
    ...mapState('storeJobNew', {
      factors: (state) => state.job[this.name]
    })
  },

现在 compute.factors 已未定义。经过数小时的谷歌搜索，我发现我不应该在这里使用箭头功能，我的代码如下所示：

  props: {
    name: { type: String, default: '' }
  },
  computed: {
    ...mapState('storeJobNew', {
      factors: function (state) { return state.job[this.name] }
    })
  },

所以这里的问题是

为什么箭头功能中的此关键字在这里不起作用？（我认为这里的 this 关键字应该是我创建的Vue实例）
为什么我需要写 this.name 而不是 this.props.name 来访问props中的值？

Answer 1

它与Proxy毫无关系。箭头函数的this指的是创建箭头函数的上下文。因此，如果您有这样的事情：

Vue.component('component', {
// ...
  computed: {
    ...mapState('storeJobNew', {
      factors: (state) => state.job[this.name]
    })
  }
// ...
}

console.dir(this)

this中的this.name与console.dir(this)中的一个相同，因为它与编写相同：

var factors = (state) => state.job[this.name]

Vue.component('component', {
// ...
  computed: {
    ...mapState('storeJobNew', {
      factors: factors
    })
  }
// ...
}

console.dir(this)

上下文是创建箭头函数的最接近的封闭函数离子之一，或者如果没有，则为全局上下文。

然后执行以下操作：Why I need to write this.name instead of this.props.name to access the value in props? Vue API的定义方式。访问值时，无需区分为什么在何处定义。

VueJS：在箭头功能中使用此关键字的问题

1 个答案: