Nuxt 3：在脚本设置中调用的插件函数可以工作，但会抛出 TypeError

Question

在我的 Nuxt 3 项目中，我构建了一个服务器插件来设置元头标签。在我的页面/路由中，我首先从后端获取数据，然后调用插件。内容按预期出现在 html 文档中，但控制台抛出错误：

Unhandled Promise Rejection: TypeError: $setTags is not a function. (In '$setTags(data.value)', '$setTags' is undefined)

插件/headTags.server.js

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.provide("setTags", (data) => {
    const runtimeConfig = useRuntimeConfig();

    useServerSeoMeta({
      // ...
    })

    useServerHead({
      // ...
    })
  });
});

页面/page.vue

<script setup>
const { $setTags } = useNuxtApp()
const { find } = useStrapi4();

const {data} = await useAsyncData(
    "posts",
    async () => {
      const response = await find(...);

      const data = response.data[0].attributes;

      return data;
    }
);
console.log(data) // Contains the data as expected.
$setTags(data.value); // Works but still throws the error. 
</script>

如果我将

$setTags()

函数移至异步函数的 return 语句之前，则数据对象将为 null。

Answer 1

注入的函数在创建时似乎不可用，尝试在运行之前添加条件：

if($setTags){
  $setTags(data.value);
}