【Vue.js】何気なく使っているthisとかcontextとかって結局なんなの？？

オブジェクト	指すもの	使う場面
this	Vueインスタンス	現Vueインスタンスを指定する時
context	・Vueインスタンス生成前のインスタンス・Storeインスタンス	・まだVueインスタンスが作られる前にVueインスタンスを使いたい時。・Storeメソッドを使いたい時。

#thisオブジェクト

###data
Vueインスタンスを指す

data () {
  return {
    email: ''
  }
},
methods: {
  into () {
    this.email = '[e-mail]'
  }
}

###Vueメソッド
Vueインスタンスを指す

methods: {
  async login () {
    const res = await this.$axios.$get('/login')
  }
}

#contextオブジェクト

###asyncData
仮のVueインスタンスを指す

async asyncData(context) {
  const posts = await context.$axios.$get('/posts')
  return { posts }
},

`{ posts }`とは

`{ posts: posts }`の略

async asyncData (context) {
  const res = await context.$axios.$get('/posts/' + context.params.id)
  return { post: res.data }
}

###Vuexのstoreメソッド
Storeインスタンスを指す

export const actions = {
  async login (context) {
    await context.commit('switchLogin')
  })
}