Vue 3 Composition API Provide/Inject не работает в Однофайловых компонентах


Vue 3 Composition API Provide/Inject не работает в Однофайловых компонентах

27.07.2020 04:08:17 Просмотров 76 Источник

Я создаю библиотеку в VueJS 3 с помощью Composition API. Я реализовал Provide/Inject, как упоминалось в документах. Но свойство в дочернем компоненте все еще не определено, и я получаю следующую ошибку в консоли браузера:

Console Output

Очень простая реализация моего кода выглядит следующим образом:

Использование В Проекте

<ThemeProvider>
    <Button color="green">
        ABC
    </Button>
</ThemeProvider>

<script>
    import { ThemeProvider, Button } from 'my-library'

    export default {
        name: 'SomePage',
        setup() {...},
    }
</script>

ThemeProvider.js (Родительский Компонент)

import { toRefs, reactive, provide, h } from 'vue'

export default {
    name: 'theme-provider',
    props:
        theme: {
            type: Object,
            default: () => ({...}),
        },
    },
    setup(props, { slots }) {
        const { theme } = toRefs(props)

        provide('theme', reactive(theme.value))

        return () =>
            h(
                'div',
                {...},
                slots.default()
            )
    },
}

Button.js (Дочерний Компонент)

import { inject, h } from 'vue'

export default {
    name: 'Button',
    setup(props, { slots }) {
        const theme = inject('theme')
        console.log(theme)  // returns undefined

        return () =>
            h(
                'button',
                {...},
                slots.default()
            )
    },
}
У вопроса есть решение - Посмотреть?

Ответы - Vue 3 Composition API Provide/Inject не работает в Однофайловых компонентах / Vue 3 Composition API Provide/Inject not working in Single File Components

Является ответом!
Sarmad

28.07.2020 03:44:43

Для любого, у кого была такая же проблема, код не имел никаких проблем. Проблема заключалась в разнице версий для 'vue' и '@vue/compiler-sfc' (компилятор Vue для Однофайлового компонента) в моем файле package.json.

enter image description here

Fanna1119

12.10.2020 11:33:27

У меня было такое же предупреждение и проблема при использовании async setup()

inject () можно использовать только внутри setup() или функциональных компонентов.

Проблема заключалась в том, что асинхронный вызов был инициализирован до того, как инъекция была инициализирована, и я не уверен, почему это имеет значение.

Решение состояло в объявлении inject перед вызовом асинхронной функции.


import getCharacters from "../composables/characters";
import { inject } from "vue";
export default {
  async setup() {
    const store = inject("store");
    const { characters } = await getCharacters();
    
    store.updateChars(characters)

    return {
      characters,
      store
    };
  },
};


Помочь в развитии проекта:
Закрыть X