Vue 3 Composition API Provide/Inject 在单文件组件中不起作用

Question

我正在使用 Composition API 在 VueJS 3 中创建一个库。我实现了 Provide/Inject，如 docs 中所述。但是子组件中的属性仍然未定义，我在浏览器控制台中收到以下错误：

我的代码的一个非常简单的实现如下：

Usage In Project

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

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

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

ThemeProvider.js (Parent Componen)

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 (Child Component)

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()
            )
    },
}

Answer 1

对于遇到同样问题的人，代码没有问题。问题是我的 package.json 文件中 'vue' 和 '@vue/compiler-sfc'（单文件组件的 Vue 编译器）的版本不同。

Answer 2

我在使用 async setup()

时遇到了同样的警告和问题

inject() can only be used inside setup() or functional components.

问题是在初始化注入之前进行异步调用，我不确定它为什么重要。

解决方案是在调用异步函数之前声明注入。


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
    };
  },
};

Vue 3 Composition API Provide/Inject 在单文件组件中不起作用

Vue 3 Composition API Provide/Inject not working in Single File Components

javascript

vue.js

vue-component

vuejs3

vue-composition-api