VueJS: Issue with using this keyword in arrow function

Question

Recently working with VueJS - Vuex and I found the this keyword is confusing. Here the code in one of my components:

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

It's work fine, until I want to make it dynamic, so the computed.factors is now base on the props.name value.

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

Now computed.factors is undefined. After a few hours of Googling, I found out that I shouldn't use arrow function here, and my code look like this:

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

So here the question:

Why this keyword in arrow function not working here? (I thought that the this keyword here should be the Vue instance that I was created)
Why I need to write this.name instead of this.props.name to access the value in props?

You must not ask two completely different not related question in one. — t.niese, Aug 21 '18 at 10:06
I thought that both of them related to the 'this' keyword. Well, I'll rework the first one to make it more relevant. — Lê Quang Bảo, Aug 21 '18 at 10:09

t.niese · Accepted Answer · 2018-08-21T10:07:55.707

It is not related to Proxy in any way. The this of the arrow function refers to the context in which the arrow function was created. So if you have something like this:

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

console.dir(this)

The this of this.name is the same as the one of console.dir(this) because it would be identical to writing:

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

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

console.dir(this)

The context is the one of the closest enclosing function ion which the arrow function was created, or if there is none then the global context.

And to: Why I need to write this.name instead of this.props.name to access the value in props? that how it is defined by the Vue API. When accessing the values you should not need to distinguish between how why where defined.

So the closest context, in this case, is the window right? I have thought that it's the Vue instance. — Lê Quang Bảo, Aug 21 '18 at 10:18
@LêQuangBảo In this case yes. Before you call `Vue.component()` you create `'component'` and `{ computed: { ... factors: (state) => state.job[this.name] ... }`, so at the time of creation you are in the global context, then those two objects are passed to `Vue.component()`. — t.niese, Aug 21 '18 at 10:33

VueJS: Issue with using this keyword in arrow function

1 Answers1