【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')
  })
}