Vue 3 - inject()는 설정 또는 기능 컴포넌트 내에서만 사용할 수 있습니다.

Vue 3 - inject()는 설정 또는 기능 컴포넌트 내에서만 사용할 수 있습니다.

왜 이런 오류가 발생하는지 이해할 수 없습니다.Vuex 스토어를 컴포지션 함수로 사용하려고 하는데 주입에 대한 오류가 계속 발생합니다(인젝트도 사용하지 않습니다).내 앱은 백엔드에 대기 API 호출을 하고 오류가 발생하면 내 구성 함수를 호출합니다.

[Vue warn]: inject() can only be used inside setup() or functional components.
inject    @ runtime-dom.esm-bundler-9db29fbd.js:6611
useStore  @ vuex.esm-bundler.js:13
useErrorHandling @  useErrorHandling.js:5
checkUserExists  @  auth.js:53

이것이 나의 작문 기능이다.

import { useStore } from 'vuex'

function useErrorHandling()
{
    const store = useStore()  // <-- this line

    function showError(errorMessage) {
        console.log(errorMessage)
    }

    return { showError }
}

export default useErrorHandling

이 선을 제거하면 오류가 발생하지 않습니다.

// const store = useStore()  // <-- this line

업데이트: 함수를 호출하는 방법입니다.

/**
     * Check if a user exists in database
     */
    static async checkUserExists(data)
    {
        const { env } = useEnv()
        const { jsonHeaders } = useHTTP()
        const { showError } = useErrorHandling()
        
        try {
            let response = await fetch(`${env('VITE_SERVER_URL')}/auth/check-user-exists`, {
                method: 'POST',
                body: JSON.stringify(data),
                headers: jsonHeaders,
            })

            if (!response.ok) {
                let errorMessage = {
                    statusText: response.statusText,
                    statusCode: response.status,
                    body: '',
                    url: response.url,
                    clientAPI: 'api/auth.js @ checkUserExists',
                }
                
                const text = await response.text()
                errorMessage.body = text

                showError(errorMessage) // <-- here
                return
            }

            response =  await response.json()
            return response.user_exists
        } catch (error) {
            alert('Error occured!')
            console.log(error)
        }
    }

이 에러에 의해서, 다음과 같은 것이 표시됩니다.useStore컴포지션 API용입니다.문서에서:

셋업 훅 내의 스토어에 액세스하려면 useStore 함수를 호출합니다.이것은 이것을 취득하는 것과 같습니다.옵션 API를 사용하여 컴포넌트 내에 $store.

를 사용하려면store모듈에서는import { store }다음을 수행합니다.

store.displaces를 설정합니다.

export const store = createStore({
...
})

기타 모듈

import { store } from './store'

언급URL : https://stackoverflow.com/questions/65340740/vue-3-inject-can-only-be-used-inside-setup-or-functional-components