Vue 3.x [Vue warn]: inject() can only be used inside setup() or functional components.の解消法

発生する問題

async setup関数（正確にはPromiseを返すsetup関数)内でinjectを使用すると下記のエラーに遭遇することがあります。

import { defineComponent, inject } from 'vue'
import axios from 'axios'
import { key } from '@/store/user'

export default defineComponent({
  async setup () {
    const { data } = await axios.get('http://example.com')
    const userStore = inject(key)

    if (!userStore) {
      throw new Error(`${key} is not provided`)
    }

    return {
      userStore
    }
  }
})

[Vue warn]: inject() can only be used inside setup() or functional components.

解決策

injectを呼び出す箇所を、awaitより前にするとエラーが発生しなくなります。

import { defineComponent, inject } from 'vue'
import axios from 'axios'
import { key } from '@/store/user'

export default defineComponent({
  async setup () {
    const userStore = inject(key)

    if (!userStore) {
      throw new Error(`${key} is not provided`)
    }

    const { data } = await axios.get('http://example.com')

    return {
      userStore
    }
  }
})

Vue Router・Vuexを呼び出す際にも注意

useRoute()、useRouter()またはuseStore()は内部でinjectを使用しているので、同じ問題に遭遇します。

import { defineComponent } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

export default defineComponent({
  async setup () {
    const { data } = await axios.get('http://example.com')
    const router = useRouter
  }
})

こちらも同様に呼び出し順を変更すればOKです。

import { defineComponent } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

export default defineComponent({
  async setup () {
    const router = useRouter
    const { data } = await axios.get('http://example.com')
  }
})