how to use provide and inject in <script setup>?

[UzkiS]

how to use provide and inject in <script setup>?

[antfu]

import { provide, inject } from 'vue'

[meteorlxy]

那就再走一步，到 sfc.vuejs.org 看编译后是什么样子

[UzkiS]

谢谢大佬引导，我已经进去观察编译后的样子，编译后除了代码顺序有区别 我也找不出什么问题，下面是编译后的代码

// 成功运行
const __sfc__ = {
  expose: [],
  async setup(__props) {
    const testFn = () => {
      alert("mua");
    };
    const test = inject("test");
    console.log(test);
    await testFn();

    return (_ctx, _cache) => {
      return _toDisplayString(_unref(test));
    };
  },
};
__sfc__.__file = "Comp.vue";
export default __sfc__;


// 失败 [Vue warn]: inject() can only be used inside setup() or functional components. 
const __sfc__ = {
  expose: [],
  async setup(__props) {
    const testFn = () => {
      alert("mua");
    };
    await testFn();
    const test = inject("test");
    console.log(test);

    return (_ctx, _cache) => {
      return _toDisplayString(_unref(test));
    };
  },
};
__sfc__.__file = "Comp.vue";
export default __sfc__;

[UzkiS]

编译前的代码
// App.vue

<template>
  <comp></comp>
</template>

<script setup>
  import { provide } from "vue";
  provide("test","t")
  import Comp from "./Comp.vue"
</script>

// Comp.vue

<template>
  {{test}}
</template>

<script setup>
  import { inject } from "vue";
  const testFn=()=>{
    alert("mua")
  }
  await testFn()
  const test=inject("test")
  console.log(test)
</script>

[meteorlxy]

那就再走一步，看源码 / 看看这个 async setup 有什么要注意的。

---

你已经是个成熟的程序员了，要学会自己走路了。

学会之后可以分享出来。

[UzkiS]

抱歉我才刚入行看了半天ts没看懂 但是我从 生命周期函数的警告知道了 这些东西在async setup中使用需要放在第一个await之前使用，谢谢您的指导