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.info(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.info(error)
        }
    }

Можете ли вы показать код, где вы используете этот файл?

laurisstepanovs 17.12.2020 13:45

Это не setup(){}. Вы не можете использовать const store = useStore()' вне setup().

laurisstepanovs 17.12.2020 14:01

@laurisstepanovs, тогда как я могу использовать store в функции композиции?

Martin Zeltin 17.12.2020 14:14

Вы можете использовать его так же, как вы сделали это в своем файле.

laurisstepanovs 17.12.2020 14:21
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
14
4
32 652
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ошибка говорит вам, что useStore предназначен только для использования внутри компонентов, поскольку модуль не является компонентом. Из документов:

Чтобы получить доступ к хранилищу в хуке настройки, вы можете вызвать функцию useStore. Это эквивалентно получению this.$store внутри компонента с помощью Option API.

Чтобы использовать store в модуле, вы можете import { store } из модуля, в котором он был создан:

store.js

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

Другой модуль

import { store } from './store'

Другие вопросы по теме