Vue 3 Composition API 提供/注入在单个文件组件中不起作用

Posted 2023-02-23

【中文标题】Vue 3 Composition API 提供/注入在单个文件组件中不起作用

【英文标题】：Vue 3 Composition API Provide/Inject not working in Single File Components

【发布时间】：2020-11-16 07:34:42

【问题描述】：

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

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

在项目中的使用

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

【参考方案1】：

我在使用async setup()时遇到了同样的警告和问题

inject() 只能在 setup() 或函数组件中使用。

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

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

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

【讨论】：

稍微扩展一下：您可以在运行 setup() 内部的异步函数之前将变量声明为初始化的 ref，然后在等待的调用返回后分配 ref.value = result。即const myRef = ref(""); let result = await asyncMethod(); myRef.value = result;

【参考方案2】：

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