title: How to bind this in then callback in Vuex
body: <p>I am using Vuex in my app. I dispatch an action inside the component. I get back the result in <code>then()</code>. I need to assign part of that result to some local variables defined in the Vue component. I am only able to do this if I bind the <code>then()</code> with <code>this</code>. Is there a way to achieve the same without using <code>bind</code>.</p>
  
  <p>Here is my original code, I am talking about the line <code>this.$store.dispatch</code>:</p>
  
  <pre><code>&lt;script&gt;
  /* eslint-disable */
  import * as d3 from 'd3'
  import FlightCard from './FlightCard'
  
  export default {
    name: 'AirportLayout',
    components: {FlightCard},
    props: ['id'],
    data () {
      return {
        cardActivator: null
      }
    },
    methods: {
      // show flight card menu
      showFlightCard: function (e) {
        // debugger
        let flight = this.$store.state.demo.find(a =&gt; {
          return a.flightNr === e.target.id
        })
        this.$store.dispatch('getFlightCard', {flightNr: flight.flightNr, scheduledDate: flight.scheduledDate}).then(function (){
          debugger
          // here I want to do something with the response
          this.cardActivator = document.getElementById(e.target.id)
          console.log('Showing flight card for: ', this.cardActivator)
        }.bind(this)) // Using bind, this gets the value of Vue component
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I read the documentation for arrow functions here <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions" rel="nofollow noreferrer">Arrow functions</a>, it says an arrow function does not create its own <code>this</code>, the <code>this</code> value of the enclosing execution context is used. I assumed that would be the Vue component, and I tried it, but then <code>this</code> value was <code>undefined</code>. So I concluded the execution context must be referring to the <code>then()</code>, am I right? If yes, how could I make <code>this</code> inside <code>then()</code> refer to the Vue component?</p>
  
  <p>Here is my code using arrow functions</p>
  
  <pre><code>&lt;script&gt;
  /* eslint-disable */
  import * as d3 from 'd3'
  import FlightCard from './FlightCard'
  
  export default {
    name: 'AirportLayout',
    components: {FlightCard},
    props: ['id'],
    data () {
      return {
        cardActivator: null
      }
    },
    methods: {
      // show flight card menu
      showFlightCard: function (e) {
        // debugger
        let flight = this.$store.state.demo.find(a =&gt; {
          return a.flightNr === e.target.id
        })
        this.$store.dispatch('getFlightCard', {flightNr: flight.flightNr, scheduledDate: flight.scheduledDate}).then(r =&gt; {
          debugger
          // here I want to do something with the response
          this.cardActivator = document.getElementById(e.target.id)
          console.log('Showing flight card for: ', this.cardActivator)
        }) // here the value for this is undefined
      }
    }
  }
  &lt;/script&gt;
  </code></pre>